Updated vertical rhythm, fixed ArgsTable for Safari, updated headings

code/ui/blocks/src/blocks/Heading.tsx

@@ -8,13 +8,13 @@ export interface HeadingProps {
   disableAnchor?: boolean;
 }
 
-export const Heading: FC<HeadingProps> = ({ children, disableAnchor }) => {
+export const Heading: FC<HeadingProps> = ({ children, disableAnchor, ...props }) => {
   if (disableAnchor || typeof children !== 'string') {
     return <H2>{children}</H2>;
   }
   const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
   return (
-    <HeaderMdx as="h2" id={tagID}>
+    <HeaderMdx as="h2" id={tagID} {...props}>
       {children}
     </HeaderMdx>
   );

code/ui/blocks/src/blocks/Stories.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import React, { useContext } from 'react';
+import { styled } from '@storybook/theming';
 import { DocsContext } from './DocsContext';
 import { DocsStory } from './DocsStory';
 import { Heading } from './Heading';
@@ -9,6 +10,22 @@ interface StoriesProps {
   includePrimary?: boolean;
 }
 
+const StyledHeading: typeof Heading = styled(Heading)(({ theme }) => ({
+  fontSize: `${theme.typography.size.s2 - 1}px`,
+  fontWeight: theme.typography.weight.bold,
+  lineHeight: '16px',
+  letterSpacing: '0.35em',
+  textTransform: 'uppercase',
+  color: theme.textMutedColor,
+  border: 0,
+  marginBottom: '12px',
+
+  '&:first-of-type': {
+    // specificity issue
+    marginTop: '56px',
+  },
+}));
+
 export const Stories: FC<StoriesProps> = ({ title, includePrimary = true }) => {
   const { componentStories } = useContext(DocsContext);
 
@@ -21,7 +38,7 @@ export const Stories: FC<StoriesProps> = ({ title, includePrimary = true }) => {
   }
   return (
     <>
-      <Heading>{title}</Heading>
+      <StyledHeading>{title}</StyledHeading>
       {stories.map(
         (story) =>
           story && <DocsStory key={story.id} of={story.moduleExport} expanded __forceInitialArgs />

code/ui/blocks/src/blocks/mdx.tsx

@@ -128,6 +128,7 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
     [headerType]: styled(headerType)({
       '& svg': {
         visibility: 'hidden',
+        marginTop: 'calc(1em - 14px)',
       },
       '&:hover svg': {
         visibility: 'visible',
@@ -139,8 +140,9 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
 
 const OcticonAnchor = styled.a(() => ({
   float: 'left',
-  paddingRight: '4px',
-  marginLeft: '-20px',
+  lineHeight: 'inherit',
+  paddingRight: '10px',
+  marginLeft: '-24px',
   // Allow the theme's text color to override the default link color.
   color: 'inherit',
 }));
@@ -177,17 +179,14 @@ const HeaderWithOcticonAnchor: FC<HeaderWithOcticonAnchorProps> = ({
           }
         }}
       >
-        <svg
-          viewBox="0 0 16 16"
-          version="1.1"
-          width="16"
-          height="16"
-          aria-hidden="true"
-          fill="currentColor"
-        >
+        <svg viewBox="0 0 14 14" width="14px" height="14px">
+          <path
+            fill="currentColor"
+            d="M11.84 2.16a2.25 2.25 0 0 0-3.18 0l-2.5 2.5c-.88.88-.88 2.3 0 3.18a.5.5 0 0 1-.7.7 3.25 3.25 0 0 1 0-4.59l2.5-2.5a3.25 3.25 0 0 1 4.59 4.6L10.48 8.1c.04-.44.01-.89-.09-1.32l1.45-1.45c.88-.88.88-2.3 0-3.18Z"
+          />
           <path
-            fillRule="evenodd"
-            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+            fill="currentColor"
+            d="M3.6 7.2c-.1-.42-.12-.87-.08-1.31L1.45 7.95a3.25 3.25 0 1 0 4.6 4.6l2.5-2.5a3.25 3.25 0 0 0 0-4.6.5.5 0 0 0-.7.7c.87.89.87 2.31 0 3.2l-2.5 2.5a2.25 2.25 0 1 1-3.2-3.2l1.46-1.44Z"
           />
         </svg>
       </OcticonAnchor>

code/ui/blocks/src/components/DocsPage.tsx

@@ -191,6 +191,7 @@ export const DocsContent = styled.div(({ theme }) => {
       ...reset,
       ...headers,
       fontSize: `${theme.typography.size.m1}px`,
+      fontWeight: theme.typography.weight.bold,
     },
     [toGlobalSelector('h4')]: {
       ...reset,

code/ui/blocks/src/components/Preview.tsx

@@ -101,6 +101,10 @@ const PreviewContainer = styled.div<PreviewProps>(
     borderBottomLeftRadius: withSource && isExpanded && 0,
     borderBottomRightRadius: withSource && isExpanded && 0,
     borderBottomWidth: isExpanded && 0,
+
+    'h3 + &': {
+      marginTop: '16px',
+    },
   }),
   ({ withToolbar }) => withToolbar && { paddingTop: 40 }
 );