diff --git a/apps/blog/src/app/(blog)/layout.tsx b/apps/blog/src/app/(blog)/layout.tsx
index 4c5a883543..b6fdce6fff 100644
--- a/apps/blog/src/app/(blog)/layout.tsx
+++ b/apps/blog/src/app/(blog)/layout.tsx
@@ -11,6 +11,12 @@ export function baseOptions() {
{
text: "Products",
sub: [
+ {
+ text: "Compute",
+ url: "https://www.prisma.io/compute",
+ desc: "Deploy TypeScript to production",
+ icon: "fa-regular fa-microchip",
+ },
{
text: "Postgres",
url: "https://www.prisma.io/postgres",
@@ -20,7 +26,7 @@ export function baseOptions() {
{
text: "ORM",
url: "https://www.prisma.io/orm",
- desc: "Managed Postgres for global workloads",
+ desc: "Type-safe ORM for TypeScript and Node.js",
icon: "fa-regular fa-database",
},
{
@@ -29,12 +35,6 @@ export function baseOptions() {
url: "https://www.prisma.io/studio",
desc: "Explore and manipulate your data",
},
- {
- icon: "fa-regular fa-bolt",
- text: "Accelerate",
- desc: "Make your database global",
- url: "https://www.prisma.io/accelerate",
- },
],
},
{
@@ -105,10 +105,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
return (
-
+
{children}
diff --git a/apps/docs/src/app/global.css b/apps/docs/src/app/global.css
index 41692a91ba..797c20d75c 100644
--- a/apps/docs/src/app/global.css
+++ b/apps/docs/src/app/global.css
@@ -1,5 +1,20 @@
@import "tailwindcss";
@import "@prisma/eclipse/styles/globals.css";
+
+/* Forward the design-token font variables to the next/font/local preloaded
+ families. This :root block intentionally comes after the @import above so
+ it wins the cascade at equal specificity. The var() fallbacks preserve the
+ original CSS @font-face names in case --font-mona-sans / --font-mona-mono
+ are ever absent. */
+:root {
+ --font-sans-display:
+ var(--font-mona-sans, "Mona Sans VF"), "Inter", "Roboto",
+ "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+ --font-mono:
+ var(--font-mona-mono, "Mona Sans Mono VF"), ui-monospace,
+ "Cascadia Code", "Source Code Pro", "Menlo", "Consolas",
+ "DejaVu Sans Mono", monospace;
+}
@import "fumadocs-ui/css/shadcn.css";
@import "fumadocs-ui/css/preset.css";
@import "fumadocs-openapi/css/preset.css";
@@ -7,100 +22,100 @@
@source "../../node_modules/streamdown/dist/*.js";
#nd-sidebar {
- @apply border-e;
- background-color: var(--color-background);
+ @apply border-e;
+ background-color: var(--color-background);
}
header &[data-search-full] {
- @apply rounded-xl;
+ @apply rounded-xl;
}
/* [data-header-tabs], */
[data-header-body] {
- @apply border-none;
+ @apply border-none;
}
#nd-page {
- @apply @container;
+ @apply @container;
}
/* Hide reCAPTCHA badge from Kapa SDK - terms are in footer */
.grecaptcha-badge {
- visibility: hidden !important;
+ visibility: hidden !important;
}
@layer utilities {
- .glitch {
- position: relative;
- }
-
- .glitch::before,
- .glitch::after {
- content: attr(data-text);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- overflow: hidden;
- }
-
- .glitch::before {
- left: 2px;
- text-shadow: -2px 0 red;
- animation: glitch-1 2s infinite linear alternate-reverse;
- }
-
- .glitch::after {
- left: -2px;
- text-shadow: -2px 0 cyan;
- animation: glitch-2 1.5s infinite linear alternate-reverse;
- }
-
- @keyframes glitch-1 {
- 0% {
- clip-path: inset(20% 0 60% 0);
- }
- 20% {
- clip-path: inset(10% 0 85% 0);
- }
- 40% {
- clip-path: inset(40% 0 40% 0);
- }
- 60% {
- clip-path: inset(80% 0 5% 0);
+ .glitch {
+ position: relative;
}
- 80% {
- clip-path: inset(50% 0 30% 0);
- }
- 100% {
- clip-path: inset(25% 0 55% 0);
- }
- }
- @keyframes glitch-2 {
- 0% {
- clip-path: inset(80% 0 5% 0);
+ .glitch::before,
+ .glitch::after {
+ content: attr(data-text);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
}
- 20% {
- clip-path: inset(50% 0 30% 0);
- }
- 40% {
- clip-path: inset(20% 0 60% 0);
+
+ .glitch::before {
+ left: 2px;
+ text-shadow: -2px 0 red;
+ animation: glitch-1 2s infinite linear alternate-reverse;
}
- 60% {
- clip-path: inset(10% 0 85% 0);
+
+ .glitch::after {
+ left: -2px;
+ text-shadow: -2px 0 cyan;
+ animation: glitch-2 1.5s infinite linear alternate-reverse;
}
- 80% {
- clip-path: inset(40% 0 40% 0);
+
+ @keyframes glitch-1 {
+ 0% {
+ clip-path: inset(20% 0 60% 0);
+ }
+ 20% {
+ clip-path: inset(10% 0 85% 0);
+ }
+ 40% {
+ clip-path: inset(40% 0 40% 0);
+ }
+ 60% {
+ clip-path: inset(80% 0 5% 0);
+ }
+ 80% {
+ clip-path: inset(50% 0 30% 0);
+ }
+ 100% {
+ clip-path: inset(25% 0 55% 0);
+ }
}
- 100% {
- clip-path: inset(75% 0 15% 0);
+
+ @keyframes glitch-2 {
+ 0% {
+ clip-path: inset(80% 0 5% 0);
+ }
+ 20% {
+ clip-path: inset(50% 0 30% 0);
+ }
+ 40% {
+ clip-path: inset(20% 0 60% 0);
+ }
+ 60% {
+ clip-path: inset(10% 0 85% 0);
+ }
+ 80% {
+ clip-path: inset(40% 0 40% 0);
+ }
+ 100% {
+ clip-path: inset(75% 0 15% 0);
+ }
}
- }
}
@media (prefers-reduced-motion: reduce) {
- .glitch::before,
- .glitch::after {
- animation: none;
- }
+ .glitch::before,
+ .glitch::after {
+ animation: none;
+ }
}
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
index 5ed0591ba7..7fcc9ee49c 100644
--- a/apps/docs/src/app/layout.tsx
+++ b/apps/docs/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { Provider } from "@/components/provider";
import { getBaseUrl } from "@/lib/urls";
import "./global.css";
import { Inter, Barlow } from "next/font/google";
+import localFont from "next/font/local";
import type { Metadata } from "next";
import type { ReactNode } from "react";
import Script from "next/script";
@@ -18,6 +19,30 @@ const barlow = Barlow({
variable: "--font-barlow",
});
+const monaSans = localFont({
+ src: [
+ {
+ path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+ weight: "200 900",
+ style: "normal",
+ },
+ {
+ path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+ weight: "200 900",
+ style: "italic",
+ },
+ ],
+ variable: "--font-mona-sans",
+ display: "swap",
+});
+
+const monaSansMono = localFont({
+ src: "../../../../packages/eclipse/src/static/fonts/MonaSansMonoVF[wght].woff2",
+ variable: "--font-mona-mono",
+ display: "swap",
+ weight: "200 900",
+});
+
export const metadata: Metadata = {
metadataBase: new URL(getBaseUrl()),
title: {
diff --git a/apps/eclipse/content/design-system/tokens/typography.mdx b/apps/eclipse/content/design-system/tokens/typography.mdx
index db085df3e5..32b3a26da7 100644
--- a/apps/eclipse/content/design-system/tokens/typography.mdx
+++ b/apps/eclipse/content/design-system/tokens/typography.mdx
@@ -44,6 +44,10 @@ Title styles use the **Mona Sans VF** display font with heavy weights and extend
.type-title-3xl · 30px/36px · weight 900 · width 125
The quick brown fox jumps over the lazy dog
+
+
.type-title-2xl · 24px/32px · weight 800 · width 110
+
The quick brown fox jumps over the lazy dog
+
.type-title-xl · 20px/28px · weight 800 · width 110
The quick brown fox jumps over the lazy dog
@@ -69,6 +73,7 @@ Title styles use the **Mona Sans VF** display font with heavy weights and extend
| `type-title-5xl` | Mona Sans VF | 64px (4rem) | 72px (4.5rem) | 900 | 125 | |
| `type-title-4xl` | Mona Sans VF | 40px (2.5rem) | 48px (3rem) | 900 | 125 | |
| `type-title-3xl` | Mona Sans VF | 30px (1.875rem) | 36px (2.25rem) | 900 | 125 | |
+| `type-title-2xl` | Mona Sans VF | 24px (1.5rem) | 32px (2rem) | 800 | 110 | |
| `type-title-xl` | Mona Sans VF | 20px (1.25rem) | 28px (1.75rem) | 800 | 110 | |
| `type-title-lg` | Mona Sans VF | 18px (1.125rem) | 28px (1.75rem) | 800 | 110 | |
| `type-title-md` | Mona Sans VF | 16px (1rem) | 24px (1.5rem) | 800 | 110 | |
diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css
index e1ef2e0348..7d5b5d6aad 100644
--- a/apps/eclipse/src/app/global.css
+++ b/apps/eclipse/src/app/global.css
@@ -5,26 +5,40 @@
@import "@prisma-docs/ui/styles";
#nd-sidebar {
- @apply border-e;
- background-color: var(--color-background);
+ @apply border-e;
+ background-color: var(--color-background);
}
header &[data-search-full] {
- @apply rounded-xl;
+ @apply rounded-xl;
}
/* [data-header-tabs], */
[data-header-body] {
- @apply border-none;
+ @apply border-none;
}
#nd-page {
- @apply @container;
+ @apply @container;
}
h1,
h2,
h3,
h4,
h5 {
- font-family: var(--font-sans-display);
+ font-family: var(--font-sans-display);
+}
+
+/* Wire next/font/local preloaded fonts into the design-token variables.
+ Declared after the @import so this :root wins on cascade order (same
+ specificity, later position). Falls back to the @font-face family names
+ from fonts.css if the CSS variables haven't been set yet. */
+:root {
+ --font-sans-display:
+ var(--font-mona-sans, "Mona Sans VF"), "Inter", "Roboto",
+ "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
+ --font-mono:
+ var(--font-mona-mono, "Mona Sans Mono VF"), ui-monospace,
+ "Cascadia Code", "Source Code Pro", "Menlo", "Consolas",
+ "DejaVu Sans Mono", monospace;
}
diff --git a/apps/eclipse/src/app/layout.tsx b/apps/eclipse/src/app/layout.tsx
index e643a2fc9f..0d808330a5 100644
--- a/apps/eclipse/src/app/layout.tsx
+++ b/apps/eclipse/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { Provider } from "@/components/provider";
import Script from "next/script";
import "./global.css";
import { Inter, Barlow } from "next/font/google";
+import localFont from "next/font/local";
import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse";
const inter = Inter({
@@ -15,11 +16,44 @@ const barlow = Barlow({
variable: "--font-barlow",
});
+const monaSans = localFont({
+ src: [
+ {
+ path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+ weight: "200 900",
+ style: "normal",
+ },
+ {
+ path: "../../../../packages/eclipse/src/static/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2",
+ weight: "200 900",
+ style: "italic",
+ },
+ ],
+ variable: "--font-mona-sans",
+ display: "swap",
+});
+
+const monaSansMono = localFont({
+ src: "../../../../packages/eclipse/src/static/fonts/MonaSansMonoVF[wght].woff2",
+ variable: "--font-mona-mono",
+ display: "swap",
+ weight: "200 900",
+});
+
export default function Layout({ children }: LayoutProps<"/">) {
return (
-
+
-
+