[Beta] Fix some CSS (#5114)

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -173,14 +173,11 @@ const CodeBlock = function CodeBlock({
         'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
         !noMargin && 'my-8'
       )}>
-      {/* These classes are fragile and depend on Sandpack. TODO: some better way. */}
-      <div className="sp-wrapper sp-121717251 sp-c-fVPbOs sp-c-fVPbOs-LrWkf-variant-dark">
-        <div className="sp-stack sp-c-kLppIp">
-          <div className="sp-code-editor sp-c-bNbSGz">
-            <pre className="sp-cm sp-pristine sp-javascript sp-c-jcgexo sp-c-jkvvao flex align-start">
-              <code className="sp-pre-placeholder sp-c-fWymNx grow-[2]">
-                {finalOutput}
-              </code>
+      <div className="sp-wrapper">
+        <div className="sp-stack">
+          <div className="sp-code-editor">
+            <pre className="sp-cm sp-pristine sp-javascript flex align-start">
+              <code className="sp-pre-placeholder grow-[2]">{finalOutput}</code>
             </pre>
           </div>
         </div>

beta/src/components/MDX/Sandpack/index.tsx

@@ -8,19 +8,19 @@ import {createFileMap} from './createFileMap';
 const SandpackRoot = lazy(() => import('./SandpackRoot'));
 
 const SandpackGlimmer = ({code}: {code: string}) => (
-  <div className="sandpack my-8">
-    <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
-      <div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
-        <div className="px-4 lg:px-6">
-          <div className="sp-tabs"></div>
+  <div className="sandpack sandpack--playground sandbox my-8">
+    <div className="sp-wrapper">
+      <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
+        <div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
+          <div className="px-4 lg:px-6">
+            <div className="sp-tabs"></div>
+          </div>
+          <div className="px-3 flex items-center justify-end grow text-right"></div>
         </div>
-        <div className="px-3 flex items-center justify-end grow text-right"></div>
-      </div>
-      <div className="sp-wrapper">
-        <div className="sp-layout sp-custom-layout min-h-[216px]">
-          <div className="sp-stack max-h-[406px] h-auto">
+        <div className="sp-layout min-h-[216px] flex items-stretch flex-wrap">
+          <div className="sp-stack sp-editor max-h-[406px] h-auto overflow-auto">
             <div className="sp-code-editor">
-              <div className="sp-cm sp-pristine overflow-auto">
+              <div className="sp-cm sp-pristine">
                 <div className="cm-editor">
                   <div>
                     <div className="cm-gutters pl-9 sticky min-h-[192px]">
@@ -37,7 +37,7 @@ const SandpackGlimmer = ({code}: {code: string}) => (
             <div className="p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none overflow-auto"></div>
           </div>
           {code.split('\n').length > 16 && (
-            <div className="flex h-[42px] text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"></div>
+            <div className="flex h-[45px] text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"></div>
           )}
         </div>
       </div>

beta/src/styles/sandpack.css

@@ -155,6 +155,12 @@ html.dark .sp-wrapper {
 /**
  * Editor
  */
+.sandpack .sp-code-editor {
+  flex: 1 1;
+  position: relative;
+  overflow: auto;
+  background: var(--sp-colors-surface1);
+}
 .sandpack .sp-code-editor .cm-content,
 .sandpack .sp-code-editor .cm-gutters,
 .sandpack .sp-code-editor .cm-gutterElement {
@@ -257,6 +263,94 @@ html.dark .sandpack--playground .sp-overlay {
   line-height: 24px !important;
 }
 
+/* We can't rely on Sandpack styles because our placeholders
+   no longer wait for Sandpack to load. */
+html {
+  --sp-space-1: 4px;
+  --sp-space-2: 8px;
+  --sp-space-3: 12px;
+  --sp-space-4: 16px;
+  --sp-space-5: 20px;
+  --sp-space-6: 24px;
+  --sp-space-7: 28px;
+  --sp-space-8: 32px;
+  --sp-space-9: 36px;
+  --sp-space-10: 40px;
+  --sp-space-11: 44px;
+  --sp-border-radius: 4px;
+  --sp-layout-height: 300px;
+  --sp-layout-headerHeight: 40px;
+  --sp-transitions-default: 150ms ease;
+  --sp-zIndices-base: 1;
+  --sp-zIndices-overlay: 2;
+  --sp-zIndices-top: 3;
+  --sp-colors-surface1: inherit;
+  --sp-colors-surface2: inherit;
+  --sp-colors-surface3: inherit;
+  --sp-colors-disabled: inherit;
+  --sp-colors-base: inherit;
+  --sp-colors-clickable: inherit;
+  --sp-colors-hover: inherit;
+  --sp-colors-accent: inherit;
+  --sp-colors-error: inherit;
+  --sp-colors-errorSurface: inherit;
+  --sp-colors-warning: inherit;
+  --sp-colors-warningSurface: inherit;
+  --sp-font-body: Optimistic Display, -apple-system, ui-sans-serif, system-ui,
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    Noto Color Emoji;
+  --sp-font-mono: Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, Liberation Mono, Courier New, monospace;
+  --sp-font-size: calc(1em - 20%);
+  --sp-font-lineHeight: 24px;
+  --sp-syntax-color-plain: inherit;
+  --sp-syntax-color-comment: inherit;
+  --sp-syntax-color-keyword: inherit;
+  --sp-syntax-color-tag: inherit;
+  --sp-syntax-color-punctuation: inherit;
+  --sp-syntax-color-definition: inherit;
+  --sp-syntax-color-property: inherit;
+  --sp-syntax-color-static: inherit;
+  --sp-syntax-color-string: inherit;
+}
+.sp-pre-placeholder .sp-syntax-string {
+  color: var(--sp-syntax-color-string);
+  font-style: var(--sp-syntax-fontStyle-string);
+}
+.sp-pre-placeholder .sp-syntax-plain {
+  color: var(--sp-syntax-color-plain);
+  font-style: var(--sp-syntax-fontStyle-plain);
+}
+.sp-pre-placeholder .sp-syntax-comment {
+  color: var(--sp-syntax-color-comment);
+  font-style: var(--sp-syntax-fontStyle-comment);
+}
+.sp-pre-placeholder .sp-syntax-keyword {
+  color: var(--sp-syntax-color-keyword);
+  font-style: var(--sp-syntax-fontStyle-keyword);
+}
+.sp-pre-placeholder .sp-syntax-definition {
+  color: var(--sp-syntax-color-definition);
+  font-style: var(--sp-syntax-fontStyle-definition);
+}
+.sp-pre-placeholder .sp-syntax-punctuation {
+  color: var(--sp-syntax-color-punctuation);
+  font-style: var(--sp-syntax-fontStyle-punctuation);
+}
+.sp-pre-placeholder .sp-syntax-property {
+  color: var(--sp-syntax-color-property);
+  font-style: var(--sp-syntax-fontStyle-property);
+}
+.sp-pre-placeholder .sp-syntax-tag {
+  color: var(--sp-syntax-color-tag);
+  font-style: var(--sp-syntax-fontStyle-tag);
+}
+.sp-pre-placeholder .sp-syntax-static {
+  color: var(--sp-syntax-color-static);
+  font-style: var(--sp-syntax-fontStyle-static);
+}
+
 /**
  * Expand button
  */