diff --git a/packages/react-dev-overlay/src/internal/components/CodeFrame/styles.tsx b/packages/react-dev-overlay/src/internal/components/CodeFrame/styles.tsx index 594fb8c1270fc..0c2ea83118152 100644 --- a/packages/react-dev-overlay/src/internal/components/CodeFrame/styles.tsx +++ b/packages/react-dev-overlay/src/internal/components/CodeFrame/styles.tsx @@ -44,7 +44,7 @@ const styles = css` [data-nextjs-codeframe] > p > svg { width: auto; height: 1em; - margin-left: 0.5rem; + margin-left: 8px; } ` diff --git a/packages/react-dev-overlay/src/internal/components/Dialog/styles.ts b/packages/react-dev-overlay/src/internal/components/Dialog/styles.ts index f47b7db366056..d4730a77c85a2 100644 --- a/packages/react-dev-overlay/src/internal/components/Dialog/styles.ts +++ b/packages/react-dev-overlay/src/internal/components/Dialog/styles.ts @@ -12,7 +12,7 @@ const styles = css` border-radius: var(--size-gap); box-shadow: 0 var(--size-gap-half) var(--size-gap-double) rgba(0, 0, 0, 0.25); - max-height: calc(100% - 3.5rem); + max-height: calc(100% - 56px); overflow-y: hidden; } diff --git a/packages/react-dev-overlay/src/internal/components/Toast/styles.ts b/packages/react-dev-overlay/src/internal/components/Toast/styles.ts index 9cb3e5550f157..43bc5e695ae12 100644 --- a/packages/react-dev-overlay/src/internal/components/Toast/styles.ts +++ b/packages/react-dev-overlay/src/internal/components/Toast/styles.ts @@ -17,7 +17,7 @@ const styles = css` } [data-nextjs-toast-wrapper] { - padding: 1rem; + padding: 16px; border-radius: var(--size-gap-half); font-weight: 500; color: var(--color-ansi-bright-white); diff --git a/packages/react-dev-overlay/src/internal/styles/Base.tsx b/packages/react-dev-overlay/src/internal/styles/Base.tsx index 828067dee4fcd..fcbc1bc56a897 100644 --- a/packages/react-dev-overlay/src/internal/styles/Base.tsx +++ b/packages/react-dev-overlay/src/internal/styles/Base.tsx @@ -7,15 +7,15 @@ export function Base() { dangerouslySetInnerHTML={{ __html: css` :host { - --size-gap-half: 0.25rem; /* 4px */ - --size-gap: 0.5rem; /* 8px */ - --size-gap-double: 1rem; /* 16px */ - --size-gap-quad: 2rem; /* 32px */ + --size-gap-half: 4px; + --size-gap: 8px; + --size-gap-double: 16px; + --size-gap-quad: 32px; - --size-font-small: 0.875rem; /* 14px */ - --size-font: 1rem; /* 16px */ - --size-font-big: 1.25rem; /* 20px */ - --size-font-bigger: 1.5rem; /* 24px */ + --size-font-small: 14px; + --size-font: 16px; + --size-font-big: 20px; + --size-font-bigger: 24px; --color-accents-1: #808080; --color-accents-2: #222222; @@ -62,22 +62,22 @@ export function Base() { } h1 { - font-size: 2.5rem; + font-size: 40px; } h2 { - font-size: 2rem; + font-size: 32px; } h3 { - font-size: 1.75rem; + font-size: 28px; } h4 { - font-size: 1.5rem; + font-size: 24px; } h5 { - font-size: 1.25rem; + font-size: 20px; } h6 { - font-size: 1rem; + font-size: 16px; } `, }} diff --git a/packages/react-dev-overlay/src/internal/styles/CssReset.tsx b/packages/react-dev-overlay/src/internal/styles/CssReset.tsx index 078766829da1f..e38026824ec9d 100644 --- a/packages/react-dev-overlay/src/internal/styles/CssReset.tsx +++ b/packages/react-dev-overlay/src/internal/styles/CssReset.tsx @@ -52,7 +52,7 @@ export function CssReset() { 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - font-size: 1rem; + font-size: 16px; font-weight: 400; line-height: 1.5; color: #212529; @@ -77,12 +77,12 @@ export function CssReset() { h5, h6 { margin-top: 0; - margin-bottom: 0.5rem; + margin-bottom: 8px; } p { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: 16px; } abbr[title], @@ -97,7 +97,7 @@ export function CssReset() { } address { - margin-bottom: 1rem; + margin-bottom: 16px; font-style: normal; line-height: inherit; } @@ -106,7 +106,7 @@ export function CssReset() { ul, dl { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: 16px; } ol ol, @@ -121,12 +121,12 @@ export function CssReset() { } dd { - margin-bottom: 0.5rem; + margin-bottom: 8px; margin-left: 0; } blockquote { - margin: 0 0 1rem; + margin: 0 0 16px; } b, @@ -186,12 +186,12 @@ export function CssReset() { pre { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: 16px; overflow: auto; } figure { - margin: 0 0 1rem; + margin: 0 0 16px; } img { @@ -209,8 +209,8 @@ export function CssReset() { } caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; + padding-top: 12px; + padding-bottom: 12px; color: #6c757d; text-align: left; caption-side: bottom; @@ -222,7 +222,7 @@ export function CssReset() { label { display: inline-block; - margin-bottom: 0.5rem; + margin-bottom: 8px; } button { @@ -311,8 +311,8 @@ export function CssReset() { width: 100%; max-width: 100%; padding: 0; - margin-bottom: 0.5rem; - font-size: 1.5rem; + margin-bottom: 8px; + font-size: 24px; line-height: inherit; color: inherit; white-space: normal;