diff --git a/apps/eclipse/cli.json b/apps/eclipse/cli.json deleted file mode 100644 index 89d51513df..0000000000 --- a/apps/eclipse/cli.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "$schema": "node_modules/@fumadocs/cli/dist/schema/src.json", - "aliases": { - "uiDir": "./components/ui", - "componentsDir": "./components", - "blockDir": "./components", - "cssDir": "./styles", - "libDir": "./lib" - }, - "baseDir": "src", - "uiLibrary": "radix-ui", - "commands": {} -} \ No newline at end of file diff --git a/apps/eclipse/components.json b/apps/eclipse/components.json deleted file mode 100644 index 27a7524b70..0000000000 --- a/apps/eclipse/components.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "$schema": "https://ui.shadcn.com/schema.json", - "style": "new-york", - "rsc": true, - "tsx": true, - "tailwind": { - "config": "tailwind.config.ts", - "css": "src/styles/globals.css", - "baseColor": "neutral", - "cssVariables": true, - "prefix": "" - }, - "iconLibrary": "lucide", - "aliases": { - "components": "@/components", - "ui": "@/components/ui", - "utils": "@/lib/cn", - "lib": "@/lib", - "hooks": "@/hooks" - } -} diff --git a/apps/eclipse/content/design-system/index.mdx b/apps/eclipse/content/design-system/index.mdx index 9ac25776ff..401dbefddf 100644 --- a/apps/eclipse/content/design-system/index.mdx +++ b/apps/eclipse/content/design-system/index.mdx @@ -1,19 +1,25 @@ --- -title: Introduction +title: Getting Started description: Eclipse is Prisma's design system, providing a consistent visual language across all our documentation and products. --- -import { EclipseShowcase } from '@/components/eclipse-showcase'; - -Built with Tailwind CSS and design tokens imported directly from Figma, it ensures design consistency and makes it easy to build beautiful, accessible interfaces. +Eclipse is a production-ready component library built on top of shadcn/ui and Tailwind CSS. It extends the shadcn/ui foundation with Prisma's design tokens, stricter accessibility defaults, and full TypeScript coverage — giving teams a consistent, type-safe starting point for building interfaces without reinventing primitives. ## Features -- **Design Tokens from Figma**: All colors, spacing, typography, and other design tokens are synced from our Figma design files -- **Dark Mode Support**: Full support for light and dark themes with automatic switching -- **Tailwind CSS Integration**: Seamless integration with Tailwind CSS for rapid development -- **Type-Safe**: TypeScript definitions for all components and tokens -- **Accessible**: Built with accessibility in mind following WCAG guidelines +- **Built on shadcn/ui** — Takes the unstyled, composable primitives from shadcn/ui and layers on Prisma's visual language, so you get a battle-tested component architecture with an opinionated design out of the box. +- **Tailwind CSS native** — Every component is styled with Tailwind utility classes and driven by design tokens defined as CSS custom properties. No runtime CSS-in-JS, no style conflicts, just predictable output. +- **Fully type-safe** — All components, props, and tokens ship with TypeScript definitions. Autocomplete works, invalid props fail at build time, and refactors are safe. +- **Accessible by default** — Components are built on Radix UI primitives with correct ARIA attributes, keyboard navigation, and focus management baked in. Meets WCAG 2.1 AA as a baseline. +- **Themeable** — Light and dark modes are supported through semantic token layers. Swap a handful of CSS variables to adapt Eclipse to any brand context. + +## Prerequisites + +Eclipse requires the following peer dependencies: + +- `react` and `react-dom` 18 or 19 +- `tailwindcss` v4 +- `@tailwindcss/postcss` v4 ## Installation @@ -23,7 +29,7 @@ pnpm add @prisma/eclipse ## Setup -### 1. Configure PostCSS +### Configure PostCSS Make sure you have the Tailwind v4 PostCSS plugin installed: @@ -41,7 +47,7 @@ export default { }; ``` -### 2. Import styles in your app global CSS +### Import styles in your app global CSS Initialize Tailwind once in the consuming app, then import Eclipse styles: @@ -50,7 +56,7 @@ Initialize Tailwind once in the consuming app, then import Eclipse styles: @import "@prisma/eclipse/styles/globals.css"; ``` -### 3. Use components +### Use components Import components from `@prisma/eclipse` in your app code: @@ -62,217 +68,7 @@ export function App() { } ``` -### Notes - -- Keep Tailwind initialization at the app level (import `tailwindcss` once in the app entry stylesheet). -- `@prisma/eclipse/styles/globals.css` includes Eclipse tokens/utilities and `@source` directives for Eclipse components. - - -## Interactive Showcase - - - -## Using Components - -### Button Component - -```tsx -import { Button } from "@prisma/eclipse"; - -export function MyComponent() { - return ( -
- - - - -
- ); -} -``` - -### Button Variants - -- `default` - Standard button style -- `ppg` - Prisma Pulse & Accelerate brand colors (teal/cyan) -- `orm` - Prisma ORM brand colors (purple/blue) -- `destructive` - Error/danger actions (red) -- `outline` - Outlined button style -- `secondary` - Secondary action style -- `ghost` - Minimal button style -- `link` - Link-styled button - -### Button Sizes - -- `sm` - Small button -- `default` - Standard button size -- `lg` - Large button - -## Color System - -Eclipse uses a semantic color system with support for both light and dark modes. - -### Background Colors - -```tsx -
Default background
-
Neutral background
-
PPG background
-
ORM background
-
Error background
-
Success background
-
Warning background
-``` - -### Foreground Colors - -```tsx -Neutral text -PPG text -ORM text -Error text -Success text -Warning text -``` - -### Color Variants - -Each color has multiple variants for different use cases: - -- `default` - Base color -- `strong` - Stronger/darker variant -- `weak` - Lighter/softer variant -- `reverse` - Contrast color for use on colored backgrounds -- `reverse-weak` - Lighter reverse color - -Example: -```tsx -
- Text on PPG background -
-``` - -## Typography - -### Font Sizes - -```tsx -

2XS - 11px

-

XS - 12px

-

SM - 14px

-

MD - 16px (Base)

-

LG - 18px

-

XL - 20px

-

2XL - 24px

-

3XL - 30px

-``` - -### Font Weights - -```tsx -

Normal (400)

-

Medium (500)

-

Semibold (600)

-

Bold (750)

-

Ultra Bold (900)

-``` - -## Spacing - -Eclipse provides a comprehensive spacing system for margins and padding. - -### Margin Scale - -```tsx -
4xs - 4px
-
3xs - 8px
-
2xs - 12px
-
xs - 16px
-
sm - 20px
-
md - 24px
-
lg - 28px
-
xl - 32px
-
4xl - 48px
-``` - -### Padding Utilities - -```tsx -
Container padding
-
Element padding
-``` - -## Border Radius - -```tsx -
Low radius (3px)
-
Square radius (6px)
-
High radius (12px)
-
Circular
-``` - -## Dark Mode - -Eclipse supports manual dark mode toggling. Apply the `dark` class to the `` element: - -```tsx -import { useEffect, useState } from "react"; - -function App() { - const [isDark, setIsDark] = useState(false); - - useEffect(() => { - document.documentElement.classList.toggle("dark", isDark); - }, [isDark]); - - return ( - - ); -} -``` - -## Design Tokens - -Access design tokens programmatically: - -```tsx -import { tokens } from "@prisma/eclipse/tokens"; - -console.log(tokens.borderRadius.square); // 6 -console.log(tokens.typography.fontSize.md); // 16 -console.log(tokens.margin.md); // 24 -``` - -## Utilities - -### Class Name Utility - -Eclipse includes a `cn` utility for merging class names with Tailwind class deduplication: - -```tsx -import { cn } from "@prisma/eclipse/lib/cn"; - -function MyComponent({ className, isActive }) { - return ( -
- Content -
- ); -} -``` - -## Resources - -- [GitHub Repository](https://github.com/prisma/prisma-docs) -- [Figma Design Files](https://figma.com) (Internal) -- [Tailwind CSS Documentation](https://tailwindcss.com) - -## Support +## Notes -For questions or issues with the Eclipse Design System, please reach out to the Prisma design team or open an issue on GitHub. +- Import `tailwindcss` once in your app's entry stylesheet — don't add it inside Eclipse or in multiple places. +- `@prisma/eclipse/styles/globals.css` includes Eclipse's design tokens, utility classes, and Tailwind v4 `@source` directives. These `@source` rules tell Tailwind where to scan for class names used by Eclipse components, so they get included in the generated CSS even though they live in `node_modules`. \ No newline at end of file diff --git a/apps/eclipse/next.config.mjs b/apps/eclipse/next.config.mjs index 5378c3da0f..d94e16e776 100644 --- a/apps/eclipse/next.config.mjs +++ b/apps/eclipse/next.config.mjs @@ -202,7 +202,6 @@ const securityHeaders = [ const config = { reactStrictMode: true, transpilePackages: ["@prisma/eclipse"], - output: "export", images: { unoptimized: true }, async headers() { return [ diff --git a/apps/eclipse/package.json b/apps/eclipse/package.json index d9813807de..08be33846c 100644 --- a/apps/eclipse/package.json +++ b/apps/eclipse/package.json @@ -4,7 +4,6 @@ "private": true, "type": "module", "scripts": { - "prebuild": "rimraf out", "build": "next build", "dev": "next dev --port 3003", "start": "next start --port 3003", @@ -13,25 +12,19 @@ "postinstall": "fumadocs-mdx" }, "dependencies": { - "@base-ui/react": "catalog:", "@fumadocs/base-ui": "catalog:", - "@fumadocs/cli": "catalog:", "@prisma/eclipse": "workspace:^", - "@prisma-docs/ui": "workspace:*", - "class-variance-authority": "catalog:", "fumadocs-core": "catalog:", "fumadocs-mdx": "catalog:", "fumadocs-ui": "catalog:", "lucide-react": "catalog:", "next": "catalog:", - "next-themes": "catalog:", "npm-to-yarn": "catalog:", "react": "catalog:", "react-dom": "catalog:", "recharts": "catalog:", "remark-directive": "catalog:", - "scroll-into-view-if-needed": "catalog:", - "zod": "catalog:" + "scroll-into-view-if-needed": "catalog:" }, "devDependencies": { "@argos-ci/playwright": "catalog:", @@ -42,9 +35,7 @@ "@types/react": "catalog:", "@types/react-dom": "catalog:", "postcss": "catalog:", - "rimraf": "catalog:", "tailwindcss": "catalog:", - "tw-animate-css": "catalog:", "typescript": "catalog:" } } diff --git a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx index 623eba3b4b..459b48ffec 100644 --- a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx +++ b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx @@ -1,15 +1,14 @@ import { source } from '@/lib/source'; -import { notFound } from 'next/navigation'; -import { getMDXComponents } from '@/mdx-components'; -import type { Metadata } from 'next'; -import { createRelativeLink } from 'fumadocs-ui/mdx'; import { - DocsBody, - DocsDescription, DocsPage, + DocsHeader, DocsTitle, - PageLastUpdate, -} from '@/components/layout/notebook/page'; + DocsDescription, + DocsBody, +} from '@/components/page'; +import { notFound } from 'next/navigation'; +import { getMDXComponents } from '@/mdx-components'; +import type { Metadata } from 'next'; interface PageParams { slug?: string[]; @@ -27,31 +26,14 @@ export default async function Page({ const MDX = page.data.body; return ( - -
+ + {page.data.title} -
- {page.data.description} + {page.data.description} + - + -
- {(page.data as { lastModified?: Date }).lastModified && ( - - )} -
); } @@ -72,6 +54,5 @@ export async function generateMetadata({ return { title: page.data.title, description: page.data.description, - openGraph: {}, }; } diff --git a/apps/eclipse/src/app/(design-system)/layout.tsx b/apps/eclipse/src/app/(design-system)/layout.tsx index 590b9d3190..aee452bce6 100644 --- a/apps/eclipse/src/app/(design-system)/layout.tsx +++ b/apps/eclipse/src/app/(design-system)/layout.tsx @@ -1,20 +1,10 @@ import { source } from '@/lib/source'; -import { baseOptions } from '@/lib/layout.shared'; -import { DocsLayout } from '@/components/layout/notebook'; -export default async function Layout({ - children, -}: { - children: React.ReactNode; -}) { - const { nav, ...base } = baseOptions(); +import { DocsLayout } from '@/components/layout'; +import type { ReactNode } from 'react'; +export default function Layout({ children }: { children: ReactNode }) { return ( - + {children} ); diff --git a/apps/eclipse/src/app/api/search/route.ts b/apps/eclipse/src/app/api/search/route.ts new file mode 100644 index 0000000000..a81c28ba7a --- /dev/null +++ b/apps/eclipse/src/app/api/search/route.ts @@ -0,0 +1,6 @@ +import { source } from '@/lib/source'; +import { createFromSource } from 'fumadocs-core/search/server'; + +const search = createFromSource(source); + +export const { GET } = search; diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css index 3a0a20fbc5..dd924df9de 100644 --- a/apps/eclipse/src/app/global.css +++ b/apps/eclipse/src/app/global.css @@ -1,30 +1,139 @@ @import "tailwindcss"; @import "@prisma/eclipse/styles/globals.css"; -@import "fumadocs-ui/css/shadcn.css"; -@import "fumadocs-ui/css/preset.css"; -@import "@prisma-docs/ui/styles"; -#nd-sidebar { - @apply border-e; - background-color: var(--color-background); -} +@theme { + --animate-fade-in: fade-in 300ms ease; + --animate-fade-out: fade-out 300ms ease forwards; + --animate-slide-in: slide-in 300ms ease; + --animate-slide-out: slide-out 300ms ease forwards; -header &[data-search-full] { - @apply rounded-xl; -} + @keyframes fade-in { + from { + opacity: 0; + } -/* [data-header-tabs], */ -[data-header-body] { - @apply border-none; -} + to { + opacity: 1; + } + } + + @keyframes fade-out { + from { + opacity: 1; + } + + to { + opacity: 0; + } + } + + @keyframes slide-in { + from { + transform: translateX(calc(-100% - 0.5rem)); + } + } -#nd-page { - @apply @container; + @keyframes slide-out { + to { + transform: translateX(calc(-100% - 0.5rem)); + } + } } -h1, -h2, -h3, -h4, -h5 { - font-family: var(--font-sans-display); + +@layer utilities { + .font-sans-display-settings { + font-feature-settings: var(--font-sans-display-settings); + } + + .font-sans-settings { + font-feature-settings: var(--font-sans-settings); + } + + .font-mono-settings { + font-feature-settings: var(--font-mono-settings); + } + + .no-scrollbar::-webkit-scrollbar { + display: none; + } + + .no-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; + } } + +.prose { + + b, + strong { + @apply font-medium; + } + + h1, + h2, + h3, + h4, + h5, + h6, + p, + dl, + ol, + ul, + li { + @apply my-3 first:mt-0 last:mb-0 text-base text-foreground-neutral; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + @apply mt-6 md:mt-12 font-bold text-2xl text-foreground-neutral; + + + h1, + + h2, + + h3, + + h4, + + h5, + + h6 { + @apply mt-6; + } + } + + h3 { + @apply text-xl; + } + + h4 { + @apply text-base; + } + + h5 { + @apply text-sm; + } + + h6 { + @apply text-2xs; + } + + p, + li { + code { + @apply -my-0.5 px-1.5 py-0.5 bg-background-neutral-strong rounded-square-low text-[0.875em]; + } + } + + li { + @apply mx-6 list-outside; + } + + ol li { + @apply list-decimal; + } + + ul li { + @apply list-disc; + } +} \ No newline at end of file diff --git a/apps/eclipse/src/app/layout.tsx b/apps/eclipse/src/app/layout.tsx index 9c781c19be..47ef45d17c 100644 --- a/apps/eclipse/src/app/layout.tsx +++ b/apps/eclipse/src/app/layout.tsx @@ -1,27 +1,21 @@ -import { Provider } from "@/components/provider"; -import Script from "next/script"; import "./global.css"; -import { Inter, Barlow } from "next/font/google"; +import Script from "next/script"; import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse"; +import { Provider } from "@/components/provider"; +import type { ReactNode } from "react"; +import type { Metadata } from "next"; -const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", -}); - -const barlow = Barlow({ - subsets: ["latin"], - weight: ["400", "500", "600", "700"], - variable: "--font-barlow", -}); +export const metadata: Metadata = { + title: { + default: "Eclipse Design System", + template: "%s | Eclipse Design System", + }, + description: "Eclipse — Prisma's design system", +}; -export default function Layout({ children }: LayoutProps<"/">) { +export default function Layout({ children }: { children: ReactNode }) { return ( - +