Style tweaks

- margin-bottom for page-level tabs - Correct font-size for H4 - Accessible color contrast for the "inserted" syntax highlight color
storybookjs · Jan 29, 2025 · d9e9c86 · d9e9c86
1 parent 7542651
commit d9e9c86
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/apps/frontpage/components/docs/content.tsx b/apps/frontpage/components/docs/content.tsx
@@ -19,7 +19,7 @@ export const Content: FC<{ page: PageDataProps }> = ({ page }) => {
           </h1>
           {!page.hideRendererSelector && <Renderers />}
           {page.tabs && page.tabs.length > 0 ? (
-            <div className="flex items-center gap-8 border-b border-zinc-200">
+            <div className="mb-8 flex items-center gap-8 border-b border-zinc-200">
               {page.tabs.map((tab) => {
                 const tabTitle = tab.tab?.title ?? tab.title;
                 const isActive = tab.pathSegment === page.path;

diff --git a/packages/ui/src/mdx/components/headings.tsx b/packages/ui/src/mdx/components/headings.tsx
@@ -66,5 +66,5 @@ export const H3: FC<Omit<HeadingProps, 'level'>> = (props) => {
 };
 
 export const H4: FC<Omit<HeadingProps, 'level'>> = (props) => {
-  return <Heading className="ui-mb-4 ui-text-xl" level={4} {...props} />;
+  return <Heading className="ui-mb-4 ui-text-lg" level={4} {...props} />;
 };
diff --git a/packages/ui/src/mdx/themes/firefox-theme-vscode.ts b/packages/ui/src/mdx/themes/firefox-theme-vscode.ts
@@ -523,7 +523,7 @@ export const firefoxThemeLight = {
     {
       scope: "markup.inserted",
       settings: {
-        foreground: "#86DE74",
+        foreground: "#2f8800",
       },
     },
     {