text and border

vercel · Jan 10, 2025 · 6b6a3d6 · 6b6a3d6
1 parent 5a7fe79
commit 6b6a3d6
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 10 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 ? 'turbopack' : ''}`}
     >
       {children}
     </Dialog>
@@ -30,4 +32,37 @@ export const DIALOG_STYLES = css`
     border-radius: var(--rounded-xl);
     box-shadow: var(--shadow-md);
   }
+
+  .error-overlay-dialog.turbopack {
+    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;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error-overlay-dialog.turbopack {
+      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/...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,6 +65,7 @@ export function ErrorOverlayLayout({
   activeIdx,
   setActiveIndex,
   footerMessage,
+  isTurbopack = !!process.env.TURBOPACK,
 }: ErrorOverlayLayoutProps) {
   return (
     <Overlay fixed={isBuildError}>
@@ -72,9 +74,10 @@ export function ErrorOverlayLayout({
         activeIdx={activeIdx}
         setActiveIndex={setActiveIndex}
         versionInfo={versionInfo}
+        isTurbopack={isTurbopack}
       />
 
-      <ErrorOverlayDialog onClose={onClose}>
+      <ErrorOverlayDialog onClose={onClose} isTurbopack={isTurbopack}>
         <DialogContent>
           <ErrorOverlayDialogHeader>
             <div

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
@@ -111,25 +111,55 @@ export const styles = css`
     stroke: var(--color-red-300);
   }
 
-  .turbopack-border {
+  .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, #ea3c5a, #4194f7) border-box;
+      linear-gradient(
+          to right,
+          var(--color-turbopack-border-red) 0%,
+          var(--color-turbopack-border-blue) 100%
+        )
+        border-box;
     border-radius: var(--rounded-full);
   }
 
-  .turbopack-text {
-    background: linear-gradient(280deg, #0096ff 0%, #ff1e56 100%);
+  .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%);
+    .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;

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,12 @@ 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;
         }
 
         @media (prefers-color-scheme: dark) {
@@ -182,6 +188,12 @@ 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;
           }
         }
       `}