gradient background

vercel · Jan 10, 2025 · 40ca927 · 40ca927
1 parent 4a20ddb
commit 40ca927
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
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,19 @@ 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 ? 'turbopack' : ''
+      }`}
+    >
       {children}
     </DialogHeader>
   )
@@ -48,4 +54,24 @@ export const DIALOG_HEADER_STYLES = css`
     top: var(--size-4);
     right: var(--size-4);
   }
+
+  .nextjs-container-errors-header.turbopack {
+    background-image: linear-gradient(
+      10deg,
+      var(--color-background-100) 60%,
+      var(--color-turbopack-background-red) 75%,
+      var(--color-turbopack-background-blue) 100%
+    );
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .nextjs-container-errors-header.turbopack {
+      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/...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
@@ -78,7 +78,7 @@ export function ErrorOverlayLayout({
           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/...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
@@ -98,6 +98,8 @@ export function Colors() {
           --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) {
@@ -194,6 +196,8 @@ export function Colors() {
             --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;
           }
         }
       `}