[dev-overlay] use rem for sizes and px for spacings (vercel#76385)

eps1lon · Feb 25, 2025 · 052c979 · 052c979
1 parent dea02ce
commit 052c979
Show file tree

Hide file tree

Showing 27 changed files with 187 additions and 184 deletions.
diff --git a/...c/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx b/...c/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx
@@ -70,8 +70,8 @@ export const CallStackFrame: React.FC<{
 
 export const CALL_STACK_FRAME_STYLES = `
   [data-nextjs-call-stack-frame-ignored] {
-    padding: var(--size-6) var(--size-8);
-    margin-bottom: var(--size-4);
+    padding: 6px 8px;
+    margin-bottom: 4px;
 
     border-radius: var(--rounded-lg);
   }
@@ -98,15 +98,20 @@ export const CALL_STACK_FRAME_STYLES = `
   .call-stack-frame-method-name {
     display: flex;
     align-items: center;
-    gap: var(--size-4);
+    gap: 4px;
 
-    margin-bottom: var(--size-4);
+    margin-bottom: 4px;
     font-family: var(--font-stack-monospace);
 
     color: var(--color-gray-1000);
     font-size: var(--size-14);
     font-weight: 500;
     line-height: var(--size-20);
+
+    svg {
+      width: var(--size-16px);
+      height: var(--size-16px);
+    }
   }
 
   .open-in-editor-button {
@@ -117,6 +122,11 @@ export const CALL_STACK_FRAME_STYLES = `
     padding: 4px;
     color: var(--color-font);
 
+    svg {
+      width: var(--size-16);
+      height: var(--size-16);
+    }
+
     &:focus-visible {
       outline: var(--focus-ring);
       outline-offset: -2px;

diff --git a/...ages/next/src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx b/...ages/next/src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx
@@ -120,9 +120,14 @@ export const CODE_FRAME_STYLES = `
     border: 1px solid var(--color-gray-400);
     border-radius: 8px;
     font-family: var(--font-stack-monospace);
-    font-size: 12px;
-    line-height: 16px;
-    margin: var(--size-8) 0;
+    font-size: var(--size-12);
+    line-height: var(--size-16);
+    margin: 8px 0;
+
+    svg {
+      width: var(--size-16);
+      height: var(--size-16);
+    }
   }
 
   .code-frame-link,
@@ -156,6 +161,7 @@ export const CODE_FRAME_STYLES = `
     margin: -4px 0 -4px auto;
     border-radius: var(--rounded-full);
     margin-left: auto;
+
     &:focus-visible {
       outline: var(--focus-ring);
       outline-offset: -2px;

diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/copy-button/index.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/copy-button/index.tsx
@@ -216,6 +216,7 @@ function CopyIcon(props: React.SVGProps<SVGSVGElement>) {
     <svg
       width="14"
       height="14"
+      viewBox="0 0 14 14"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
@@ -248,6 +249,11 @@ function CopySuccessIcon() {
 export const COPY_BUTTON_STYLES = `
   .nextjs-data-copy-button {
     color: inherit;
+
+    svg {
+      width: var(--size-16);
+      height: var(--size-16);
+    }
   }
   .nextjs-data-copy-button--initial:hover {
     cursor: pointer;

diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/dialog/styles.ts b/packages/next/src/client/components/react-dev-overlay/ui/components/dialog/styles.ts
@@ -1,9 +1,10 @@
 const styles = `
   [data-nextjs-dialog-root] {
     --next-dialog-radius: var(--rounded-xl);
-    --next-dialog-footer-height: 48px;
+    --next-dialog-footer-height: var(--size-48);
     --next-dialog-max-width: 960px;
     --next-dialog-row-padding: 16px;
+    --next-dialog-container-padding: 12px;
 
     display: flex;
     flex-direction: column-reverse;
@@ -54,7 +55,7 @@ const styles = `
     display: flex;
     flex-direction: column;
     position: relative;
-    padding: var(--size-16) var(--size-12);
+    padding: 16px 12px;
   }
 
   /* Account for the footer height, when present */
@@ -64,7 +65,7 @@ const styles = `
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
     flex-shrink: 0;
-    margin-bottom: var(--size-8);
+    margin-bottom: 8px;
   }
 
   [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {

diff --git a/...xt/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx b/...xt/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx
@@ -121,40 +121,39 @@ function ChevronUpDown() {
 export const CALL_STACK_STYLES = `
   .error-overlay-call-stack-container {
     position: relative;
-    margin-top: var(--size-8);
+    margin-top: 8px;
   }
 
   .error-overlay-call-stack-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    min-height: 28px;
-    padding: var(--size-8) var(--size-8) var(--size-12) var(--size-4);
+    min-height: var(--size-28);
+    padding: 8px 8px 12px 4px;
     width: 100%;
   }
 
   .error-overlay-call-stack-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: var(--size-8);
+    gap: 8px;
 
     margin: 0;
 
     color: var(--color-gray-1000);
     font-size: var(--size-16);
     font-weight: 500;
-    line-height: var(--size-20);
   }
 
   .error-overlay-call-stack-count {
     display: flex;
     justify-content: center;
     align-items: center;
 
-    width: 20px;
-    height: 20px;
-    gap: var(--size-4);
+    width: var(--size-20);
+    height: var(--size-20);
+    gap: 4px;
 
     color: var(--color-gray-1000);
     text-align: center;
@@ -186,5 +185,10 @@ export const CALL_STACK_STYLES = `
     &:focus {
       outline: var(--focus-ring);
     }
+
+    svg {
+      width: var(--size-16);
+      height: var(--size-16);
+    }
   }
 `
diff --git a/...onents/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/...onents/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
@@ -262,8 +262,8 @@ function DevToolsPopover({
         // Reset the toast component's default positions.
         bottom: 'initial',
         left: 'initial',
-        [vertical]: 'var(--size-10)',
-        [horizontal]: 'var(--size-20)',
+        [vertical]: '10px',
+        [horizontal]: '20px',
       }}
     >
       <NextLogo
@@ -395,7 +395,13 @@ function DevToolsPopover({
 
 function ChevronRight() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
       <path
         fill="#666"
         fillRule="evenodd"
@@ -593,10 +599,16 @@ export const DEV_TOOLS_INDICATOR_STYLES = `
     display: flex;
     align-items: center;
     padding: 8px 6px;
-    height: 36px;
+    height: var(--size-36);
     border-radius: 6px;
     text-decoration: none !important;
     user-select: none;
+    white-space: nowrap;
+
+    svg {
+      width: var(--size-16);
+      height: var(--size-16);
+    }
 
     &:focus-visible {
       outline: 0;
@@ -636,8 +648,8 @@ export const DEV_TOOLS_INDICATOR_STYLES = `
     align-items: center;
     justify-content: center;
     gap: 8px;
-    min-width: 41px;
-    height: 24px;
+    min-width: var(--size-40);
+    height: var(--size-24);
     background: var(--color-background-100);
     border: 1px solid var(--color-gray-alpha-400);
     background-clip: padding-box;
@@ -646,7 +658,7 @@ export const DEV_TOOLS_INDICATOR_STYLES = `
     color: var(--color-gray-1000);
     border-radius: 128px;
     font-weight: 500;
-    font-size: 13px;
+    font-size: var(--size-13);
     font-variant-numeric: tabular-nums;
 
     &[data-has-issues='true'] {
@@ -655,8 +667,8 @@ export const DEV_TOOLS_INDICATOR_STYLES = `
     }
 
     .dev-tools-indicator-issue-count-indicator {
-      width: 8px;
-      height: 8px;
+      width: var(--size-8);
+      height: var(--size-8);
       background: var(--color-primary);
       box-shadow: 0 0 0 2px var(--color-secondary);
       border-radius: 50%;
@@ -665,7 +677,7 @@ export const DEV_TOOLS_INDICATOR_STYLES = `
 
   .dev-tools-indicator-shortcut {
     display: flex;
-    gap: var(--size-4);
+    gap: 4px;
 
     kbd {
       width: var(--size-20);

diff --git a/...ct-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx b/...ct-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx
@@ -69,23 +69,23 @@ export const DEV_TOOLS_INFO_STYLES = `
   }
 
   .dev-tools-info-container {
-    padding: var(--size-6);
+    padding: 6px;
   }
 
   .dev-tools-info-title {
-    padding: var(--size-8) var(--size-6);
+    padding: 8px 6px;
     color: var(--color-gray-1000);
-    font-size: 14px;
+    font-size: var(--size-14);
     font-weight: 500;
-    line-height: 20px;
+    line-height: var(--size-20);
     margin: 0;
   }
 
   .dev-tools-info-article {
-    padding: var(--size-8) var(--size-6);
+    padding: 8px 6px;
     color: var(--color-gray-1000);
-    font-size: 14px;
-    line-height: 20px;
+    font-size: var(--size-14);
+    line-height: var(--size-20);
     margin: 0;
   }
   .dev-tools-info-paragraph {
@@ -98,15 +98,15 @@ export const DEV_TOOLS_INFO_STYLES = `
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--size-8) var(--size-6);
+    padding: 8px 6px;
   }
 
   .dev-tools-info-close-button {
-    padding: 0 var(--size-8);
-    height: 28px;
-    font-size: 14px;
+    padding: 0 8px;
+    height: var(--size-28);
+    font-size: var(--size-14);
     font-weight: 500;
-    line-height: 20px;
+    line-height: var(--size-20);
     transition: background var(--duration-short) ease;
     color: var(--color-gray-1000);
     border-radius: var(--rounded-md-2);
@@ -120,11 +120,11 @@ export const DEV_TOOLS_INFO_STYLES = `
 
   .dev-tools-info-learn-more-button {
     align-content: center;
-    padding: 0 var(--size-8);
-    height: 28px;
-    font-size: 14px;
+    padding: 0 8px;
+    height: var(--size-28);
+    font-size: var(--size-14);
     font-weight: 500;
-    line-height: 20px;
+    line-height: var(--size-20);
     transition: background var(--duration-short) ease;
     color: var(--color-background-100);
     border-radius: var(--rounded-md-2);

diff --git a/...ct-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx b/...ct-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx
@@ -115,15 +115,15 @@ export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `
     background: var(--color-gray-400);
     color: var(--color-gray-1000);
     font-family: var(--font-stack-mono);
-    padding: var(--size-2) var(--size-4);
+    padding: 2px 4px;
     margin: 0;
-    font-size: 13px;
+    font-size: var(--size-13);
     white-space: break-spaces;
     border-radius: var(--rounded-md-2);
   }
 
   .dev-tools-info-code-block-container {
-    padding: var(--size-6);
+    padding: 6px;
   }
 
   .dev-tools-info-code-block {
@@ -137,7 +137,7 @@ export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `
   .dev-tools-info-code-block-pre {
     margin: 0;
     font-family: var(--font-stack-mono);
-    font-size: 12px;
+    font-size: var(--size-12);
   }
 
   .dev-tools-info-copy-button {
@@ -146,9 +146,9 @@ export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `
     display: flex;
     justify-content: center;
     align-items: center;
-    right: var(--size-8);
-    top: var(--size-8);
-    padding: var(--size-4);
+    right: 8px;
+    top: 8px;
+    padding: 4px;
     height: var(--size-24);
     width: var(--size-24);
     border-radius: var(--rounded-md-2);
@@ -159,7 +159,7 @@ export const DEV_TOOLS_INFO_TURBOPACK_INFO_STYLES = `
   .dev-tools-info-code-block-line {
     display: block;
     line-height: 1.5;
-    padding: 0 1rem;
+    padding: 0 16px;
   }
 
   .dev-tools-info-code-block-line.dev-tools-info-highlight {