[DevOverlay] Apply Turbopack Styling (#74636)

This PR added Turbopack styling. ### Light ![CleanShot 2025-01-08 at 22 55 43](https://github.com/user-attachments/assets/ae636df8-16cd-49a3-861a-42dace9cd431) ### Dark ![CleanShot 2025-01-08 at 22 55 56](https://github.com/user-attachments/assets/c47128b1-236f-4bfe-b8e5-80f7d4638814) Closes NDX-636 --------- Co-authored-by: Jiachi Liu <[email protected]>
vercel · Jan 10, 2025 · 55bbf1b · 55bbf1b
1 parent 4ce61ca
commit 55bbf1b
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 16 deletions.
diff --git a/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx b/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/dialog.tsx
@@ -2,11 +2,13 @@ import { Dialog } from '../../Dialog/Dialog'
 import { noop as css } from '../../../helpers/noop-template'
 
 type ErrorOverlayDialogProps = {
+  isTurbopack?: boolean
   children?: React.ReactNode
   onClose?: () => void
 }
 
 export function ErrorOverlayDialog({
+  isTurbopack,
   children,
   onClose,
 }: ErrorOverlayDialogProps) {
@@ -16,7 +18,7 @@ export function ErrorOverlayDialog({
       aria-labelledby="nextjs__container_errors_label"
       aria-describedby="nextjs__container_errors_desc"
       onClose={onClose}
-      className="error-overlay-dialog"
+      className={`error-overlay-dialog ${isTurbopack ? 'nextjs-error-overlay-dialog-turbopack-background' : ''}`}
     >
       {children}
     </Dialog>
@@ -31,4 +33,18 @@ export const DIALOG_STYLES = css`
     box-shadow: var(--shadow-md);
     position: relative;
   }
+
+  .nextjs-error-overlay-dialog-turbopack-background {
+    border: 1px solid transparent;
+    background:
+      linear-gradient(var(--color-background-100), var(--color-background-100))
+        padding-box,
+      linear-gradient(
+          to right top,
+          var(--color-gray-400) 75%,
+          var(--color-turbopack-border-blue) 87.5%,
+          var(--color-turbopack-border-red) 100%
+        )
+        border-box;
+  }
 `
diff --git a/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx b/...t/components/react-dev-overlay/_experimental/internal/components/Errors/dialog/header.tsx
@@ -3,13 +3,21 @@ import { noop as css } from '../../../helpers/noop-template'
 
 type ErrorOverlayDialogHeaderProps = {
   children?: React.ReactNode
+  isTurbopack?: boolean
 }
 
 export function ErrorOverlayDialogHeader({
   children,
+  isTurbopack,
 }: ErrorOverlayDialogHeaderProps) {
   return (
-    <DialogHeader className="nextjs-container-errors-header">
+    <DialogHeader
+      className={`nextjs-container-errors-header ${
+        isTurbopack
+          ? 'nextjs-error-overlay-dialog-header-turbopack-background'
+          : ''
+      }`}
+    >
       {children}
     </DialogHeader>
   )
@@ -48,4 +56,13 @@ export const DIALOG_HEADER_STYLES = css`
     top: var(--size-4);
     right: var(--size-4);
   }
+
+  .nextjs-error-overlay-dialog-header-turbopack-background {
+    background-image: linear-gradient(
+      10deg,
+      var(--color-background-100) 60%,
+      var(--color-turbopack-background-red) 75%,
+      var(--color-turbopack-background-blue) 100%
+    );
+  }
 `
diff --git a/...nternal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx b/...nternal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx
@@ -10,13 +10,15 @@ type ErrorOverlayFloatingHeaderProps = {
   activeIdx?: number
   setActiveIndex?: (index: number) => void
   versionInfo?: VersionInfo
+  isTurbopack?: boolean
 }
 
 export function ErrorOverlayFloatingHeader({
   readyErrors,
   activeIdx,
   setActiveIndex,
   versionInfo,
+  isTurbopack,
 }: ErrorOverlayFloatingHeaderProps) {
   return (
     <div className="error-overlay-floating-header">
@@ -26,7 +28,10 @@ export function ErrorOverlayFloatingHeader({
         activeIdx={activeIdx ?? 0}
         onActiveIndexChange={setActiveIndex ?? (() => {})}
       />
-      <VersionStalenessInfo versionInfo={versionInfo} />
+      <VersionStalenessInfo
+        versionInfo={versionInfo}
+        isTurbopack={isTurbopack}
+      />
     </div>
   )
 }

diff --git a/...rimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx b/...rimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx
@@ -26,3 +26,10 @@ export const Default: Story = {
     children: "Module not found: Cannot find module './missing-module'",
   },
 }
+
+export const Turbopack: Story = {
+  args: {
+    ...Default.args,
+    isTurbopack: true,
+  },
+}
diff --git a/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx b/...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
@@ -48,6 +48,7 @@ type ErrorOverlayLayoutProps = {
   activeIdx?: number
   setActiveIndex?: (index: number) => void
   footerMessage?: string
+  isTurbopack?: boolean
 }
 
 export function ErrorOverlayLayout({
@@ -64,19 +65,20 @@ export function ErrorOverlayLayout({
   activeIdx,
   setActiveIndex,
   footerMessage,
+  isTurbopack = !!process.env.TURBOPACK,
 }: ErrorOverlayLayoutProps) {
   return (
     <Overlay fixed={isBuildError}>
-
-      <ErrorOverlayDialog onClose={onClose}>
+      <ErrorOverlayDialog onClose={onClose} isTurbopack={isTurbopack}>
         <ErrorOverlayFloatingHeader
           readyErrors={readyErrors}
           activeIdx={activeIdx}
           setActiveIndex={setActiveIndex}
           versionInfo={versionInfo}
+          isTurbopack={isTurbopack}
         />
         <DialogContent>
-          <ErrorOverlayDialogHeader>
+          <ErrorOverlayDialogHeader isTurbopack={isTurbopack}>
             <div
               className="nextjs__container_errors__error_title"
               // allow assertion in tests before error rating is implemented

diff --git a/...v-overlay/_experimental/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx b/...v-overlay/_experimental/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx
@@ -3,7 +3,7 @@ import { noop as css } from '../../helpers/noop-template'
 
 export function VersionStalenessInfo({
   versionInfo,
-  isTurbopack = !!process.env.TURBOPACK,
+  isTurbopack,
 }: {
   versionInfo: VersionInfo | undefined
   isTurbopack?: boolean
@@ -15,7 +15,11 @@ export function VersionStalenessInfo({
   if (!text) return null
 
   return (
-    <span className="nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click">
+    <span
+      className={`nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click ${
+        isTurbopack ? 'turbopack-border' : ''
+      }`}
+    >
       <Eclipse className={`version-staleness-indicator ${indicatorClass}`} />
       <span data-nextjs-version-checker title={title}>
         {text}
@@ -107,18 +111,30 @@ export const styles = css`
     stroke: var(--color-red-300);
   }
 
-  .turbopack-text {
-    background: linear-gradient(280deg, #0096ff 0%, #ff1e56 100%);
+  .nextjs-container-build-error-version-status.turbopack-border {
+    border: 1px solid transparent;
+    background:
+      linear-gradient(var(--color-background-100), var(--color-background-100))
+        padding-box,
+      linear-gradient(
+          to right,
+          var(--color-turbopack-border-red) 0%,
+          var(--color-turbopack-border-blue) 100%
+        )
+        border-box;
+    border-radius: var(--rounded-full);
+  }
+
+  .nextjs-container-build-error-version-status > .turbopack-text {
+    background: linear-gradient(
+      to right,
+      var(--color-turbopack-text-red) 0%,
+      var(--color-turbopack-text-blue) 100%
+    );
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
-
-  @media (prefers-color-scheme: dark) {
-    .turbopack-text {
-      background: linear-gradient(280deg, #45b2ff 0%, #ff6d92 100%);
-    }
-  }
 `
 
 function Eclipse({ className }: { className: string }) {

diff --git a/...ges/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx b/...ges/next/src/client/components/react-dev-overlay/_experimental/internal/styles/colors.tsx
@@ -92,6 +92,14 @@ export function Colors() {
           --color-green-800: #388e4a;
           --color-green-900: #297c3b;
           --color-green-1000: #18311e;
+
+          /* Turbopack Light - Temporary */
+          --color-turbopack-text-red: #ff1e56;
+          --color-turbopack-text-blue: #0096ff;
+          --color-turbopack-border-red: #f0adbe;
+          --color-turbopack-border-blue: #adccea;
+          --color-turbopack-background-red: #fff7f9;
+          --color-turbopack-background-blue: #f6fbff;
         }
 
         @media (prefers-color-scheme: dark) {
@@ -182,6 +190,14 @@ export function Colors() {
             --color-green-800: #388e4a;
             --color-green-900: #63c174;
             --color-green-1000: #e5fbeb;
+
+            /* Turbopack Dark - Temporary */
+            --color-turbopack-text-red: #ff6d92;
+            --color-turbopack-text-blue: #45b2ff;
+            --color-turbopack-border-red: #6e293b;
+            --color-turbopack-border-blue: #284f80;
+            --color-turbopack-background-red: #250d12;
+            --color-turbopack-background-blue: #0a1723;
           }
         }
       `}