UI: Adjust code block font sizes

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
         node-version: [18]
 
     steps:
-     - uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
       - uses: pnpm/[email protected]
         with:
@@ -28,4 +28,4 @@ jobs:
         run: pnpm i --frozen-lockfile
 
       - name: Run Tests
-        run: pnpm test
+        run: pnpm test

packages/ui/src/components/inline-toc.tsx

@@ -23,13 +23,13 @@ export function InlineTOC({
   return (
     <Collapsible
       defaultOpen={defaultOpen}
-      className="not-prose rounded-lg border bg-card text-sm text-card-foreground"
+      className="not-prose rounded-lg border bg-card text-card-foreground"
     >
       <CollapsibleTrigger asChild>
         {children ?? (
           <button
             type="button"
-            className="inline-flex w-full items-center justify-between p-4 font-medium [&[data-state=open]>svg]:rotate-180"
+            className="inline-flex w-full items-center justify-between p-4 text-medium font-medium [&[data-state=open]>svg]:rotate-180"
           >
             Table of Contents
             <ChevronDown className="h-4 w-4 transition-transform duration-200" />
@@ -37,14 +37,14 @@ export function InlineTOC({
         )}
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="flex flex-col px-4 pb-4 text-muted-foreground">
+        <div className="flex flex-col px-6 pb-4 text-sm text-muted-foreground">
           {items.map((item) => (
             <a
               key={item.url}
               href={item.url}
-              className="border-l py-1.5 hover:border-primary hover:text-primary"
+              className="py-1.5 hover:text-accent-foreground"
               style={{
-                paddingLeft: 16 * Math.max(item.depth - 1, 1),
+                paddingLeft: 16 * Math.max(item.depth - 2, 0),
               }}
             >
               {item.title}

packages/ui/src/components/roll-button.tsx

@@ -44,6 +44,7 @@ export function RollButton({ percentage = 0.2 }: RollButtonProps): JSX.Element {
       className={cn(
         buttonVariants({
           color: 'secondary',
+          size: 'icon',
           className:
             'fixed bottom-8 p-3 right-8 z-50 shadow-md rounded-full transition-all',
         }),
@@ -56,7 +57,7 @@ export function RollButton({ percentage = 0.2 }: RollButtonProps): JSX.Element {
         });
       }}
     >
-      <ChevronUpIcon className="h-5 w-5" />
+      <ChevronUpIcon />
     </button>
   );
 }

packages/ui/src/components/sidebar.tsx

@@ -64,7 +64,7 @@ export function Sidebar({
     >
       <SidebarContext.Provider value={{ defaultOpenLevel }}>
         <ScrollArea className="flex-1">
-          <div className="flex flex-col gap-8 pb-10 pt-4 max-md:px-4 md:pr-4 md:pt-10">
+          <div className="flex flex-col gap-8 pb-10 pt-4 max-md:px-4 md:pr-3 md:pt-10">
             {banner}
             <div className="lg:hidden">
               {items.map((item) => (

packages/ui/src/components/ui/command.tsx

@@ -4,12 +4,7 @@ import { Search } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '@/utils/cn';
 import { buttonVariants } from '@/theme/variants';
-import {
-  Drawer as Dialog,
-  DrawerClose as DialogClose,
-  DrawerContent as DialogContent,
-  DrawerFooter as DialogFooter,
-} from './drawer';
+import { Dialog, DialogClose, DialogContent, DialogFooter } from './dialog';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -21,6 +16,8 @@ const Command = React.forwardRef<
       'flex h-full w-full flex-col divide-y divide-border',
       className,
     )}
+    shouldFilter={false}
+    loop
     {...props}
   />
 ));
@@ -38,7 +35,7 @@ function CommandDialog({
   return (
     <Dialog {...props}>
       <DialogContent className="p-0">
-        <Command shouldFilter={false} loop>
+        <Command>
           {children}
           {footer ? <DialogFooter>{footer}</DialogFooter> : null}
         </Command>

packages/ui/src/components/ui/dialog.tsx

@@ -49,10 +49,7 @@ function DialogFooter({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>): JSX.Element {
   return (
-    <div
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
-      {...props}
-    />
+    <div className={cn('mt-auto flex flex-col p-3', className)} {...props} />
   );
 }
 

packages/ui/src/components/ui/drawer.tsx

@@ -212,7 +212,7 @@ const DrawerContent = React.forwardRef<
         onPointerUp={onRelease}
         onPointerMove={onDrag}
         className={cn(
-          'fixed inset-x-0 bottom-0 z-50 mx-auto mt-24 flex h-[80%] max-h-[500px] max-w-lg flex-col rounded-t-lg border bg-popover data-[state=closed]:animate-drawer-out data-[state=open]:animate-drawer-in',
+          'fixed inset-x-0 bottom-0 z-50 mx-auto mt-24 flex h-[80%] max-h-[500px] max-w-lg flex-col rounded-t-lg border bg-popover shadow-lg data-[state=closed]:animate-drawer-out data-[state=open]:animate-drawer-in',
           className,
         )}
         {...props}
@@ -243,10 +243,7 @@ function DrawerFooter({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>): JSX.Element {
   return (
-    <div
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
-      {...props}
-    />
+    <div className={cn('mt-auto flex flex-col p-3', className)} {...props} />
   );
 }
 

packages/ui/src/tailwind-plugin.ts

@@ -130,6 +130,7 @@ export const docsUi = plugin.withOptions<DocsUIOptions>(
       addComponents({
         '.nd-codeblock': {
           '& [data-line]': {
+            'font-size': '13px',
             'padding-left': `theme('spacing.4')`,
             'padding-right': `theme('spacing.4')`,
           },

packages/ui/src/theme/typography.ts

@@ -45,7 +45,7 @@ export const typography = {
         '0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)',
     },
     ul: {
-      paddingLeft: '1rem',
+      paddingLeft: '0.7rem',
     },
     // Disabled styles, handled by Next Docs
     'pre code': false,