Page Editor Improvements: TypeScale configuration (#8064). Fix #7982

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

client/src/tokens/typeScale.js

@@ -0,0 +1,70 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plugin = require('tailwindcss/plugin');
+
+// TypeScale plugin:
+// This plugin generates component classes using tailwind's configuration for each object inside of the typeScale const.
+// If the tailwind config is using a prefix such as 'w-' this will be included in the compiled css class eg. .w-h1
+module.exports = plugin(({ addComponents, theme }) => {
+  const headingBaseStyles = {
+    fontWeight: theme('fontWeight.bold'),
+    color: theme('colors.primary.DEFAULT'),
+    lineHeight: theme('lineHeight.tight'),
+  };
+
+  const typeScale = {
+    '.h1': {
+      fontSize: theme('fontSize.30'),
+      fontWeight: theme('fontWeight.extrabold'),
+      color: theme('colors.primary.DEFAULT'),
+      lineHeight: theme('lineHeight.tight'),
+    },
+    '.h2': {
+      fontSize: theme('fontSize.24'),
+      ...headingBaseStyles,
+    },
+    '.h3': {
+      fontSize: theme('fontSize.22'),
+      ...headingBaseStyles,
+    },
+    '.h4': {
+      fontSize: theme('fontSize.18'),
+      ...headingBaseStyles,
+    },
+    '.label-1': {
+      fontSize: theme('fontSize.16'),
+      fontWeight: theme('fontWeight.bold'),
+      color: theme('colors.primary.DEFAULT'),
+      lineHeight: theme('lineHeight.tight'),
+    },
+    '.label-2': {
+      fontSize: theme('fontSize.15'),
+      fontWeight: theme('fontWeight.semibold'),
+      color: theme('colors.primary.DEFAULT'),
+      lineHeight: theme('lineHeight.tight'),
+    },
+    '.label-3': {
+      fontSize: theme('fontSize.14'),
+      fontWeight: theme('fontWeight.medium'),
+      color: theme('colors.primary.DEFAULT'),
+      lineHeight: theme('lineHeight.tight'),
+    },
+    '.body-text': {
+      fontSize: theme('fontSize.16'),
+      fontWeight: theme('fontWeight.normal'),
+      lineHeight: theme('lineHeight.normal'),
+    },
+    '.body-text-large': {
+      fontSize: theme('fontSize.18'),
+      fontWeight: theme('fontWeight.normal'),
+      lineHeight: theme('lineHeight.normal'),
+    },
+    '.help-text': {
+      fontSize: theme('fontSize.14'),
+      fontWeight: theme('fontWeight.normal'),
+      color: theme('colors.grey.400'),
+      lineHeight: theme('lineHeight.tight'),
+    },
+  };
+
+  addComponents(typeScale);
+});

client/src/tokens/typography.js

@@ -56,17 +56,8 @@ const letterSpacing = {
 
 const lineHeight = {
   none: '1',
-  tight: '1.25',
-  snug: '1.375',
+  tight: '1.3',
   normal: '1.5',
-  relaxed: '1.625',
-  loose: '2',
-  3: '.75rem',
-  4: '1rem',
-  5: '1.25rem',
-  6: '1.5rem',
-  7: '1.75rem',
-  8: '2rem',
 };
 
 module.exports = {

client/tailwind.config.js

@@ -1,3 +1,6 @@
+/**
+ * Design Tokens
+ */
 const colors = require('./src/tokens/colors');
 const {
   fontFamily,
@@ -14,6 +17,15 @@ const {
 } = require('./src/tokens/objectStyles');
 const { spacing } = require('./src/tokens/spacing');
 
+/**
+ * Plugins
+ */
+const typeScale = require('./src/tokens/typeScale');
+
+/**
+ * Functions
+ * themeColors: For converting our design tokens into a format that tailwind accepts
+ */
 const themeColors = Object.fromEntries(
   Object.entries(colors).map(([key, hues]) => {
     const shades = Object.fromEntries(
@@ -51,6 +63,6 @@ module.exports = {
     },
     spacing,
   },
-  plugins: [],
+  plugins: [typeScale],
   corePlugins: {},
 };