chore(tokens): Add variable typography to example scss file (#3607)

Author: brandonferrua

design-tokens/var-spacing.yml

@@ -5,18 +5,10 @@ global:
   category: spacing
   type: size
   comment: 'Overrides for spacing tokens that should only be used in densifying of the User Interface'
-  cssProperties:
-  - top
-  - right
-  - bottom
-  - left
-  - 'margin*'
-  - 'padding*'
-  - '*width'
-  - '*height'
 
 imports:
 - ./aliases/spacing.yml
+- ./aliases/font-size.yml
 
 props:
   VAR_SPACING_XXX_SMALL:
@@ -93,3 +85,37 @@ props:
   VAR_SPACING_VERTICAL_XX_LARGE:
     value: '{!SPACING_LARGE}'
     comment: 'Variable vertical spacing token for size XX Large'
+
+  VAR_FONT_SIZE_1:
+    value: '{!FONT_SIZE_1}'
+    comment: 'Variable typography token for font size 1'
+  VAR_FONT_SIZE_2:
+    value: '{!FONT_SIZE_2}'
+    comment: 'Variable typography token for font size 2'
+  VAR_FONT_SIZE_3:
+    value: '{!FONT_SIZE_3}'
+    comment: 'Variable typography token for font size 3'
+  VAR_FONT_SIZE_4:
+    value: '{!FONT_SIZE_4}'
+    comment: 'Variable typography token for font size 4'
+  VAR_FONT_SIZE_5:
+    value: '{!FONT_SIZE_4}'
+    comment: 'Variable typography token for font size 5'
+  VAR_FONT_SIZE_6:
+    value: '{!FONT_SIZE_5}'
+    comment: 'Variable typography token for font size 6'
+  VAR_FONT_SIZE_7:
+    value: '{!FONT_SIZE_7}'
+    comment: 'Variable typography token for font size 7'
+  VAR_FONT_SIZE_8:
+    value: '{!FONT_SIZE_7}'
+    comment: 'Variable typography token for font size 8'
+  VAR_FONT_SIZE_9:
+    value: '{!FONT_SIZE_9}'
+    comment: 'Variable typography token for font size 9'
+  VAR_FONT_SIZE_10:
+    value: '{!FONT_SIZE_10}'
+    comment: 'Variable typography token for font size 10'
+  VAR_FONT_SIZE_11:
+    value: '{!FONT_SIZE_11}'
+    comment: 'Variable typography token for font size 11'