fix: fixed typography, display and links sections

Author: PKulkoRaccoonGang

styles/css/core/variables.css

@@ -143,8 +143,8 @@
   --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */
   --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */
   --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */
-  --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */
-  --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */
+  --pgn-typography-font-size-xs: 75%; /* X-small font size. */
+  --pgn-typography-font-size-sm: 87.5%; /* Small font size. */
   --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */
   --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
   --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */

tokens/src/core/global/typography.json

@@ -41,12 +41,12 @@
         },
         "sm": {
           "source": "$small-font-size",
-          "$value": ".875rem",
+          "$value": "87.5%",
           "$description": "Small font size."
         },
         "xs": {
           "source": "$x-small-font-size",
-          "$value": ".75rem",
+          "$value": "75%",
           "$description": "X-small font size."
         },
         "micro": {

www/src/components/Menu.scss

@@ -40,7 +40,7 @@
     margin-bottom: var(--pgn-spacing-spacer-base);
 
     .pgn_collapsible {
-      font-size: var(--pgn-typography-font-size-xs);
+      font-size: var(--pgn-typography-font-size-sm);
       line-height: var(--pgn-typography-headings-line-height);
       font-weight: var(--pgn-typography-font-weight-normal);
       color: var(--pgn-color-gray-700);
@@ -86,7 +86,6 @@
     }
 
     .collapsible-basic .collapsible-trigger {
-      font-size: var(--pgn-typography-font-size-sm);
       text-decoration: none;
       justify-content: start;
       flex-direction: row-reverse;

www/src/components/_doc-elements.scss

@@ -342,3 +342,37 @@
     grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens
   }
 }
+
+.pgn-doc__code-display-block,
+.pgn-doc__code-headings-block {
+  .pgn__data-table-cell-wrap {
+    max-width: max-content;
+  }
+
+  @media (--pgn-size-breakpoint-max-width-md) {
+    overflow: hidden;
+    overflow-x: scroll;
+
+    .pgn__data-table-layout-wrapper {
+      overflow-x: initial;
+    }
+  }
+
+  .heading-label {
+    font-size: var(--pgn-typography-font-size-base);
+    line-height: var(--pgn-typography-line-height-base);
+  }
+}
+
+.pgn-doc__code-body-block {
+  .lead,
+  .font-size-normal,
+  .small,
+  .x-small {
+    line-height: var(--pgn-typography-line-height-base);
+  }
+
+  .pgn__data-table-wrapper {
+    font-size: inherit;
+  }
+}

www/src/components/typography-page/Body.tsx

@@ -15,7 +15,7 @@ export default function Body() {
   return (
     <>
       <h2 className="mb-2">Body</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-body-block">
         <DataTable
           itemCount={bodyClassesAndDescriptions.length}
           data={bodyClassesAndDescriptions}

www/src/components/typography-page/Display.tsx

@@ -10,7 +10,7 @@ export default function Display() {
   return (
     <>
       <h2 className="mb-2">Display</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-display-block">
         <DataTable
           itemCount={displaySizes.length}
           data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}

www/src/components/typography-page/Headings.tsx

@@ -18,7 +18,7 @@ export default function Headings() {
   return (
     <>
       <h2 className="mb-2">Headings</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-headings-block">
         <DataTable
           itemCount={tableData.length}
           data={tableData}

www/src/components/typography-page/Links.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 // @ts-ignore
-import { DataTable } from '~paragon-react';
+import { DataTable, Alert } from '~paragon-react';
+import { Info } from '~paragon-icons';
 import { TextCell } from '../TableCells';
 
 const linksClassesAndDescriptions = [
-  {
-    example: <a href="/#">Standalone Link</a>,
-    description: <span>The default style for <code>a</code> tags that don`t appear in a <code>p</code> tag.</span>,
-  },
   {
     example: <span>An <a className="inline-link" href="/foundations/typography/">inline link</a> in a sentence.</span>,
     description: <span>For links inside a <code>p</code> or with the <code>.inline-link</code> class name.</span>,
@@ -34,6 +31,9 @@ export default function Links() {
   return (
     <>
       <h2 className="mb-2">Links</h2>
+      <Alert variant="info" icon={Info}>
+        <a href="/#">Standalone Link</a> - the default style for <code>a</code> tag that appear outside of <code>p</code> tag.
+      </Alert>
       <div className="mb-4">
         <DataTable
           itemCount={4}