ui(components): updated component font sizes and design component docs (#4486)

platform/app/tailwind.config.js

@@ -39,16 +39,18 @@ module.exports = {
       mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
     },
     fontSize: {
-      xxs: '0.6875rem', // 11px
-      xs: '0.75rem', // 12px
-      sm: '0.8125rem', // 13px
-      base: '0.875rem', // 14px
-      lg: '1rem', // 16px
-      xl: '1.125rem', // 18px
-      '2xl': '1.25rem', // 20px
-      '3xl': '1.375rem', // 22px
-      '4xl': '1.5rem', // 24px
-      '5xl': '1.875rem', // 30px
+      xxs: '0.625rem', // 10px
+      xs: '0.6875rem', // 11px
+      sm: '0.75rem', // 12px
+      base: '0.8125rem', // 13px
+      lg: '0.875rem', // 14px
+      xl: '1rem', // 16px
+      // 2xl and above will be updated in an upcoming version
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
     },
   },
 };