UI: Update typography & layout styles

fuma-nama · Oct 18, 2023 · 522ed48 · 522ed48
1 parent 1759e8a
commit 522ed48
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 30 deletions.
diff --git a/.changeset/strong-impalas-hang.md b/.changeset/strong-impalas-hang.md
@@ -0,0 +1,5 @@
+---
+'next-docs-ui': minor
+---
+
+Update typography & layout styles
diff --git a/apps/docs/app/docs/[mode]/layout.tsx b/apps/docs/app/docs/[mode]/layout.tsx
@@ -42,7 +42,7 @@ export default function Layout({
             <div className="relative flex flex-row gap-2 items-center p-2 rounded-lg border text-xs bg-card text-card-foreground transition-colors hover:bg-muted/80">
               <Icon className="w-9 h-9 p-2 shrink-0 rounded-md text-primary bg-primary/10 border" />
               <div>
-                <p className="font-medium max-lg:text-sm">
+                <p className="font-medium">
                   {title} {version}
                 </p>
                 <p className="text-muted-foreground">{description}</p>

diff --git a/apps/docs/app/style.css b/apps/docs/app/style.css
@@ -11,3 +11,13 @@
     @apply animate-infinite-rotate absolute left-[50%] top-[50%] block w-[600px] translate-x-[-50%] translate-y-[-50%] bg-[conic-gradient(var(--tw-gradient-stops))] pb-[600px];
   }
 }
+
+:root {
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+}
+
+.dark {
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+}
diff --git a/apps/docs/content/docs/ui/index.mdx b/apps/docs/content/docs/ui/index.mdx
@@ -3,14 +3,12 @@ title: Quick Start
 description: Getting Started with Next Docs UI
 ---
 
-Next Docs UI is the Next.js framework for building documentation website.
-
-## Features
+![Features](/features.png)
 
-Built on the top of Next.js, Radix UI and **Next Docs Zeta**. Styled using
-Tailwind CSS. Next Docs UI provides many features out of the box.
+## Overview
 
-![Features](/features.png)
+Next Docs UI is the Next.js framework for building documentation website. Built
+on the top of Next.js, Radix UI and Next Docs Zeta.
 
 ## Getting Started
 

diff --git a/packages/next-docs-ui/css/styles.css b/packages/next-docs-ui/css/styles.css
@@ -41,8 +41,6 @@ body {
   --secondary-foreground: 0 0% 9%;
   --accent: 0 0% 94.1%;
   --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
   --ring: 0 0% 63.9%;
 }
 
@@ -63,8 +61,6 @@ body {
   --secondary-foreground: 0 0% 98%;
   --accent: 0 0% 14.9%;
   --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 85.7% 97.3%;
   --ring: 0 0% 14.9%;
 }
 

diff --git a/packages/next-docs-ui/src/components/sidebar.tsx b/packages/next-docs-ui/src/components/sidebar.tsx
@@ -40,14 +40,14 @@ export function Sidebar({ banner, footer }: SidebarProps) {
       className={cn(
         'nd-flex nd-flex-col nd-w-full',
         open
-          ? 'lg:nd-w-[260px]'
-          : 'lg:nd-w-0 lg:nd-overflow-hidden lg:nd-opacity-0',
-        'lg:nd-sticky lg:nd-top-16 lg:nd-h-[calc(100vh-4rem)] lg:nd-transition-[width,opacity]',
-        'max-lg:nd-fixed max-lg:nd-inset-y-0 max-lg:nd-right-0 max-lg:nd-bg-background max-lg:nd-z-40 max-lg:nd-pt-16 max-lg:data-[open=false]:nd-hidden sm:max-lg:nd-max-w-sm sm:max-lg:nd-border-l'
+          ? 'md:nd-w-[260px]'
+          : 'md:nd-w-0 md:nd-overflow-hidden md:nd-opacity-0',
+        'md:nd-sticky md:nd-top-16 md:nd-h-body md:nd-transition-[width,opacity]',
+        'max-md:nd-fixed max-md:nd-inset-y-0 max-md:nd-right-0 max-md:nd-bg-background max-md:nd-z-40 max-md:nd-pt-16 max-md:data-[open=false]:nd-hidden sm:max-md:nd-max-w-sm sm:max-md:nd-border-l'
       )}
     >
-      <ScrollArea className="nd-flex-1 lg:nd-w-[260px]">
-        <div className="nd-flex nd-flex-col nd-pb-10 nd-pt-4 nd-text-medium max-lg:nd-px-6 lg:nd-pr-4 lg:nd-pt-12 lg:nd-text-sm">
+      <ScrollArea className="nd-flex-1 md:nd-w-[260px]">
+        <div className="nd-flex nd-flex-col nd-pb-10 nd-pt-4 nd-text-medium max-md:nd-px-6 md:nd-pr-4 md:nd-pt-12 md:nd-text-sm">
           {banner}
           {tree.children.map((item, i) => (
             <Node key={i} item={item} level={1} />
@@ -56,12 +56,12 @@ export function Sidebar({ banner, footer }: SidebarProps) {
       </ScrollArea>
       <div
         className={cn(
-          'nd-flex nd-flex-row nd-items-center nd-gap-2 nd-border-t nd-py-2 max-lg:nd-px-8',
-          !footer && 'lg:nd-hidden'
+          'nd-flex nd-flex-row nd-items-center nd-gap-2 nd-border-t nd-py-2 max-md:nd-px-8',
+          !footer && 'md:nd-hidden'
         )}
       >
         {footer}
-        <ThemeToggle className="lg:nd-hidden" />
+        <ThemeToggle className="md:nd-hidden" />
       </div>
     </Base.SidebarList>
   )

diff --git a/packages/next-docs-ui/src/components/toc.tsx b/packages/next-docs-ui/src/components/toc.tsx
@@ -13,7 +13,7 @@ export function TOC(props: {
   footer: ReactNode
 }) {
   return (
-    <div className="nd-sticky nd-divide-y nd-flex nd-flex-col nd-top-16 nd-gap-4 nd-py-12 nd-w-[250px] nd-h-[calc(100vh-4rem)] max-xl:nd-hidden">
+    <div className="nd-sticky nd-divide-y nd-flex nd-flex-col nd-top-16 nd-gap-4 nd-py-12 nd-w-[220px] nd-h-body max-lg:nd-hidden xl:nd-w-[260px]">
       {props.header}
       {props.items.length > 0 && <TOCItems items={props.items} />}
       {props.footer && (
@@ -35,7 +35,7 @@ function TOCItems({ items }: { items: TOCItemType[] }) {
       <h3 className="nd-inline-flex nd-items-center nd-mb-4">
         <TextIcon className="nd-w-4 nd-h-4 nd-mr-2" /> {toc}
       </h3>
-      <div className="nd-flex nd-flex-col nd-border-l-2 nd-text-muted-foreground">
+      <div className="nd-flex nd-flex-col nd-gap-1 nd-border-l-2 nd-text-muted-foreground">
         <Marker pos={pos} />
         {items.map((item, i) => (
           <TOCItem key={i} item={item} setMarker={setPos} />
@@ -83,7 +83,7 @@ function TOCItem({
       ref={ref}
       href={item.url}
       className={cn(
-        'nd-py-1.5 nd-text-ellipsis nd-transition-colors nd-overflow-hidden data-[active=true]:nd-text-primary',
+        'nd-py-1 nd-text-ellipsis nd-transition-colors nd-overflow-hidden data-[active=true]:nd-text-primary',
         item.depth <= 2 && 'nd-pl-4',
         item.depth === 3 && 'nd-pl-7',
         item.depth >= 4 && 'nd-pl-10'

diff --git a/packages/next-docs-ui/src/layout.tsx b/packages/next-docs-ui/src/layout.tsx
@@ -82,7 +82,7 @@ export function DocsLayout({
           collapsibleSidebar={sidebar.collapsible ?? true}
         />
       )}
-      <div className="nd-flex nd-flex-row nd-container nd-gap-10">
+      <div className="nd-flex nd-flex-row nd-container nd-gap-4 xl:nd-gap-10">
         {replaceOrDefault(
           sidebar,
           <Sidebar banner={sidebar.banner} footer={sidebar.footer} />

diff --git a/packages/next-docs-ui/src/page.tsx b/packages/next-docs-ui/src/page.tsx
@@ -46,7 +46,7 @@ export function DocsPage({
 }: DocsPageProps) {
   return (
     <>
-      <article className="nd-flex nd-flex-col nd-gap-6 nd-w-0 nd-flex-1 nd-py-8 lg:nd-py-12">
+      <article className="nd-flex nd-flex-col nd-gap-6 nd-w-0 nd-flex-1 nd-py-12">
         {replaceOrDefault(breadcrumb, <Breadcrumb />)}
         {props.children}
         {props.lastUpdate && <LastUpdate date={props.lastUpdate} />}

diff --git a/packages/next-docs-ui/src/utils/config.ts b/packages/next-docs-ui/src/utils/config.ts
@@ -1,2 +1,2 @@
 export const default_image_sizes =
-  '(max-width: 1024px) 100vw, (max-width: 1280px) 70vw, 800px'
+  '(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 800px'
diff --git a/packages/next-docs-ui/tailwind.config.js b/packages/next-docs-ui/tailwind.config.js
@@ -46,6 +46,9 @@ module.exports = {
       fontSize: {
         medium: '15px'
       },
+      height: {
+        body: 'calc(100vh - 4rem)'
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
@@ -60,10 +63,6 @@ module.exports = {
           DEFAULT: 'hsl(var(--secondary))',
           foreground: 'hsl(var(--secondary-foreground))'
         },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))'
-        },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
           foreground: 'hsl(var(--muted-foreground))'
@@ -131,6 +130,8 @@ module.exports = {
             '--tw-prose-kbd-shadows': 'hsl(var(--primary)/0.5)',
             // not used
             '--tw-prose-pre-code': false,
+            fontSize: '15px',
+            fontHeight: '24px',
             maxWidth: 'none',
             a: {
               transition: 'opacity 0.3s',