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

platform/ui-next/tailwind.config.js

@@ -13,16 +13,22 @@ module.exports = {
       inter: ['Inter', 'sans-serif'],
     },
     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',
+      // '2xl': '1.125rem', // 18px
+      // '3xl': '1.375rem', // 22px
+      // '4xl': '1.5rem', // 24px
+      // '5xl': '1.875rem', // 30px
     },
     fontWeight: {
       hairline: '100',