@atlaskit/tokens 1.21.0 → 1.22.0

package/dist/es2019/artifacts/tokens-raw/atlassian-typography.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::eaaa970ce079ba5e26ef6b1bd1440d6c>>
+ * @codegen <<SignedSource::2dbe284320c4a652bc8420a1e9457c66>>
  * @codegenCommand yarn build tokens
  */
 const tokens = [{
@@ -10,7 +10,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "The default body font."
   },
-  "value": "normal 400 14px/20px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 400 14px/20px var(--ds-font-family-body)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -24,7 +24,7 @@ const tokens = [{
       "fontWeight": "FontWeight400",
       "fontSize": "FontSize14",
       "lineHeight": "LineHeight200",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.body",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -39,7 +39,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "Larger body font or default body font for text rich experiences."
   },
-  "value": "normal 400 16px/24px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 400 16px/24px var(--ds-font-family-body)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -53,7 +53,7 @@ const tokens = [{
       "fontWeight": "FontWeight400",
       "fontSize": "FontSize16",
       "lineHeight": "LineHeight300",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.body",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -68,7 +68,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "Smaller body font."
   },
-  "value": "normal 400 12px/20px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 400 12px/20px var(--ds-font-family-body)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -82,7 +82,7 @@ const tokens = [{
       "fontWeight": "FontWeight400",
       "fontSize": "FontSize12",
       "lineHeight": "LineHeight200",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.body",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -97,7 +97,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "Used for monospace and code."
   },
-  "value": "normal 400 0.875em/1 ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
+  "value": "normal 400 0.875em/1 var(--ds-font-family-code)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -111,7 +111,7 @@ const tokens = [{
       "fontWeight": "FontWeight400",
       "fontSize": "FontSizeCode",
       "lineHeight": "LineHeight1",
-      "fontFamily": "FontFamilyWebMono",
+      "fontFamily": "font.family.code",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -126,7 +126,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "TBD"
   },
-  "value": "normal 700 24px/28px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 700 24px/28px var(--ds-font-family-heading)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -140,7 +140,7 @@ const tokens = [{
       "fontWeight": "FontWeight700",
       "fontSize": "FontSize24",
       "lineHeight": "LineHeight400",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.heading",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -155,7 +155,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "TBD"
   },
-  "value": "normal 700 20px/24px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 700 20px/24px var(--ds-font-family-heading)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -169,7 +169,7 @@ const tokens = [{
       "fontWeight": "FontWeight700",
       "fontSize": "FontSize20",
       "lineHeight": "LineHeight300",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.heading",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -184,7 +184,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "TBD"
   },
-  "value": "normal 700 16px/20px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 700 16px/20px var(--ds-font-family-heading)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -198,7 +198,7 @@ const tokens = [{
       "fontWeight": "FontWeight700",
       "fontSize": "FontSize16",
       "lineHeight": "LineHeight200",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.heading",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -213,7 +213,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "TBD"
   },
-  "value": "normal 700 28px/32px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 700 28px/32px var(--ds-font-family-heading)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -227,7 +227,7 @@ const tokens = [{
       "fontWeight": "FontWeight700",
       "fontSize": "FontSize28",
       "lineHeight": "LineHeight500",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.heading",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -242,7 +242,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "TBD"
   },
-  "value": "normal 700 14px/16px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 700 14px/16px var(--ds-font-family-heading)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -256,7 +256,7 @@ const tokens = [{
       "fontWeight": "FontWeight700",
       "fontSize": "FontSize14",
       "lineHeight": "LineHeight100",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.heading",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -271,7 +271,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "TBD"
   },
-  "value": "normal 700 36px/40px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 700 36px/40px var(--ds-font-family-heading)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -285,7 +285,7 @@ const tokens = [{
       "fontWeight": "FontWeight700",
       "fontSize": "FontSize36",
       "lineHeight": "LineHeight700",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.heading",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -300,7 +300,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "TBD"
   },
-  "value": "normal 700 12px/16px ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 700 12px/16px var(--ds-font-family-heading)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -314,7 +314,7 @@ const tokens = [{
       "fontWeight": "FontWeight700",
       "fontSize": "FontSize12",
       "lineHeight": "LineHeight100",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.heading",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -439,7 +439,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "Single-line non-wrapping text like that in a button."
   },
-  "value": "normal 400 14px/1 ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 400 14px/1 var(--ds-font-family-body)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -453,7 +453,7 @@ const tokens = [{
       "fontWeight": "FontWeight400",
       "fontSize": "FontSize14",
       "lineHeight": "LineHeight1",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.body",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -468,7 +468,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "Single-line non-wrapping supporting text like that in a smaller label."
   },
-  "value": "normal 400 12px/1 ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
+  "value": "normal 400 12px/1 var(--ds-font-family-body)",
   "filePath": "src/tokens/atlassian-typography/theme.tsx",
   "isSource": true,
   "original": {
@@ -482,7 +482,7 @@ const tokens = [{
       "fontWeight": "FontWeight400",
       "fontSize": "FontSize12",
       "lineHeight": "LineHeight1",
-      "fontFamily": "FontFamilyWebSans",
+      "fontFamily": "font.family.body",
       "fontStyle": "normal",
       "letterSpacing": "LetterSpacing0"
     }
@@ -497,7 +497,7 @@ const tokens = [{
     "introduced": "1.14.0",
     "description": "Helpful guidance goes here"
   },
-  "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
+  "value": "ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif",
   "filePath": "src/tokens/atlassian-typography/font-family.tsx",
   "isSource": true,
   "original": {
@@ -507,16 +507,16 @@ const tokens = [{
       "introduced": "1.14.0",
       "description": "Helpful guidance goes here"
     },
-    "value": "FontFamilyWebMono"
+    "value": "FontFamilyWebSans"
   },
-  "name": "font.family.code",
-  "path": ["font", "family", "code"],
-  "cleanName": "font.family.code"
+  "name": "font.family.body",
+  "path": ["font", "family", "body"],
+  "cleanName": "font.family.body"
 }, {
   "attributes": {
     "group": "fontFamily",
-    "state": "active",
-    "introduced": "0.10.33",
+    "state": "experimental",
+    "introduced": "1.14.0",
     "description": "Helpful guidance goes here"
   },
   "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
@@ -525,15 +525,15 @@ const tokens = [{
   "original": {
     "attributes": {
       "group": "fontFamily",
-      "state": "active",
-      "introduced": "0.10.33",
+      "state": "experimental",
+      "introduced": "1.14.0",
       "description": "Helpful guidance goes here"
     },
     "value": "FontFamilyWebMono"
   },
-  "name": "font.family.monospace",
-  "path": ["font", "family", "monospace"],
-  "cleanName": "font.family.monospace"
+  "name": "font.family.code",
+  "path": ["font", "family", "code"],
+  "cleanName": "font.family.code"
 }, {
   "attributes": {
     "group": "fontFamily",
@@ -553,9 +553,31 @@ const tokens = [{
     },
     "value": "FontFamilyWebSans"
   },
-  "name": "font.family.product",
-  "path": ["font", "family", "product"],
-  "cleanName": "font.family.product"
+  "name": "font.family.heading",
+  "path": ["font", "family", "heading"],
+  "cleanName": "font.family.heading"
+}, {
+  "attributes": {
+    "group": "fontFamily",
+    "state": "active",
+    "introduced": "0.10.33",
+    "description": "Helpful guidance goes here"
+  },
+  "value": "ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace",
+  "filePath": "src/tokens/atlassian-typography/font-family.tsx",
+  "isSource": true,
+  "original": {
+    "attributes": {
+      "group": "fontFamily",
+      "state": "active",
+      "introduced": "0.10.33",
+      "description": "Helpful guidance goes here"
+    },
+    "value": "FontFamilyWebMono"
+  },
+  "name": "font.family.monospace",
+  "path": ["font", "family", "monospace"],
+  "cleanName": "font.family.monospace"
 }, {
   "attributes": {
     "group": "fontFamily",

package/dist/es2019/babel-plugin/plugin.js

@@ -15,7 +15,21 @@ const getThemeValues = theme => {
       // If it's a box shadow, it'll be an array of values that needs to be
       // formatted to look like '0px 0px 8px #091e4229, 0px 0px 1px #091e421F'
       value = rawToken.value.reduce((prev, curr, index) => {
-        let value = `${curr.offset.x}px ${curr.offset.y}px ${curr.radius}px ${curr.color}`;
+        let color = curr.color;
+
+        // Opacity needs to be added to hex values that don't already contain it.
+        // If it contained opacity, the length would be 9 instead of 7.
+        if (color.length === 7 && curr.opacity) {
+          const opacityAsHex = curr.opacity.toString(16); // 0.4f5c28f5c28f5c
+          let shortenedHex = opacityAsHex.slice(2, 4); // 4f
+
+          // The hex value has to have a length of 2. If it's shorter, a "0" needs to be added.
+          if (shortenedHex.length === 1) {
+            shortenedHex += '0';
+          }
+          color += shortenedHex;
+        }
+        let value = `${curr.offset.x}px ${curr.offset.y}px ${curr.radius}px ${color}`;
         if (index === 0) {
           value += `, `;
         }

package/dist/es2019/get-token-value.js

@@ -1,7 +1,7 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "1.21.0";
+const version = "1.22.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.

package/dist/es2019/get-token.js

@@ -2,7 +2,7 @@ import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
 const name = "@atlaskit/tokens";
-const version = "1.21.0";
+const version = "1.22.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.

package/dist/es2019/tokens/atlassian-typography/font-family.js

@@ -7,7 +7,10 @@ const font = {
       monospace: {
         value: 'FontFamilyWebMono'
       },
-      product: {
+      heading: {
+        value: 'FontFamilyWebSans'
+      },
+      body: {
         value: 'FontFamilyWebSans'
       },
       brand: {

package/dist/es2019/tokens/atlassian-typography/theme.js

@@ -6,7 +6,7 @@ const typography = {
           fontWeight: 'FontWeight700',
           fontSize: 'FontSize36',
           lineHeight: 'LineHeight700',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -16,7 +16,7 @@ const typography = {
           fontWeight: 'FontWeight700',
           fontSize: 'FontSize28',
           lineHeight: 'LineHeight500',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -26,7 +26,7 @@ const typography = {
           fontWeight: 'FontWeight700',
           fontSize: 'FontSize24',
           lineHeight: 'LineHeight400',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -36,7 +36,7 @@ const typography = {
           fontWeight: 'FontWeight700',
           fontSize: 'FontSize20',
           lineHeight: 'LineHeight300',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -46,7 +46,7 @@ const typography = {
           fontWeight: 'FontWeight700',
           fontSize: 'FontSize16',
           lineHeight: 'LineHeight200',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -56,7 +56,7 @@ const typography = {
           fontWeight: 'FontWeight700',
           fontSize: 'FontSize14',
           lineHeight: 'LineHeight100',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -66,7 +66,7 @@ const typography = {
           fontWeight: 'FontWeight700',
           fontSize: 'FontSize12',
           lineHeight: 'LineHeight100',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -78,7 +78,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSizeCode',
           lineHeight: 'LineHeight1',
-          fontFamily: 'FontFamilyWebMono',
+          fontFamily: 'font.family.code',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -90,7 +90,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize14',
           lineHeight: 'LineHeight200',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -100,7 +100,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize12',
           lineHeight: 'LineHeight200',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -110,7 +110,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize16',
           lineHeight: 'LineHeight300',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -122,7 +122,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize14',
           lineHeight: 'LineHeight1',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -132,7 +132,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize12',
           lineHeight: 'LineHeight1',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }

package/dist/es2019/tokens/atlassian-typography-adg3/font-family.js

@@ -7,7 +7,10 @@ const font = {
       monospace: {
         value: 'FontFamilyWebMono'
       },
-      product: {
+      body: {
+        value: 'FontFamilyWebSans'
+      },
+      heading: {
         value: 'FontFamilyWebSans'
       },
       brand: {

package/dist/es2019/tokens/atlassian-typography-adg3/theme.js

@@ -1,3 +1,11 @@
+const utility = {
+  // @ts-expect-error in complete utility theme
+  UNSAFE: {
+    textTransformUppercase: {
+      value: 'uppercase'
+    }
+  }
+};
 const typography = {
   font: {
     heading: {
@@ -6,7 +14,7 @@ const typography = {
           fontWeight: 'FontWeight500',
           fontSize: 'LegacyFontSize35',
           lineHeight: 'LineHeight700',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing400'
         }
@@ -16,7 +24,7 @@ const typography = {
           fontWeight: 'FontWeight600',
           fontSize: 'LegacyFontSize29',
           lineHeight: 'LineHeight500',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing400'
         }
@@ -26,7 +34,7 @@ const typography = {
           fontWeight: 'FontWeight500',
           fontSize: 'FontSize24',
           lineHeight: 'LineHeight400',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing400'
         }
@@ -36,7 +44,7 @@ const typography = {
           fontWeight: 'FontWeight500',
           fontSize: 'FontSize20',
           lineHeight: 'LineHeight300',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing300'
         }
@@ -46,7 +54,7 @@ const typography = {
           fontWeight: 'FontWeight600',
           fontSize: 'FontSize16',
           lineHeight: 'LineHeight200',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing200'
         }
@@ -56,7 +64,7 @@ const typography = {
           fontWeight: 'FontWeight600',
           fontSize: 'FontSize14',
           lineHeight: 'LineHeight100',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing100'
         }
@@ -66,7 +74,7 @@ const typography = {
           fontWeight: 'FontWeight600',
           fontSize: 'FontSize12',
           lineHeight: 'LineHeight100',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.heading',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -78,7 +86,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSizeCode',
           lineHeight: 'LineHeight1',
-          fontFamily: 'FontFamilyWebMono',
+          fontFamily: 'font.family.code',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -90,7 +98,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize14',
           lineHeight: 'LineHeight200',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -100,7 +108,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize16',
           lineHeight: 'LineHeight300',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -110,7 +118,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'LegacyFontSize11',
           lineHeight: 'LineHeight200',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -122,7 +130,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'FontSize14',
           lineHeight: 'LineHeight1',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -132,7 +140,7 @@ const typography = {
           fontWeight: 'FontWeight400',
           fontSize: 'LegacyFontSize11',
           lineHeight: 'LineHeight1',
-          fontFamily: 'FontFamilyWebSans',
+          fontFamily: 'font.family.body',
           fontStyle: 'normal',
           letterSpacing: 'LetterSpacing0'
         }
@@ -140,4 +148,7 @@ const typography = {
     }
   }
 };
-export default typography;
+export default {
+  font: typography.font,
+  utility
+};

package/dist/es2019/tokens/atlassian-typography-minor3/font-family.js

@@ -7,7 +7,10 @@ const font = {
       monospace: {
         value: 'FontFamilyWebMono'
       },
-      product: {
+      body: {
+        value: 'FontFamilyWebSans'
+      },
+      heading: {
         value: 'FontFamilyWebSans'
       },
       brand: {