Merge branch 'main' of https://github.com/reactjs/reactjs.org into sy…

…nc-c6a26627

beta/colors.js

@@ -23,6 +23,7 @@ module.exports = {
   'secondary-button-dark': '#404756', // gray-70
 
   // Gray
+  'gray-95': '#16181D',
   'gray-90': '#23272F',
   'gray-80': '#343A46',
   'gray-70': '#404756',

beta/src/components/MDX/Challenges/Challenges.tsx

@@ -119,12 +119,14 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
             )}>
             {isRecipes ? 'Try out some recipes' : 'Try out some challenges'}
           </H2>
-          <Navigation
-            activeChallenge={activeChallenge}
-            challenges={challenges}
-            handleChange={handleChallengeChange}
-            isRecipes={isRecipes}
-          />
+          {challenges.length > 1 && (
+            <Navigation
+              activeChallenge={activeChallenge}
+              challenges={challenges}
+              handleChange={handleChallengeChange}
+              isRecipes={isRecipes}
+            />
+          )}
         </div>
         <div className="p-5 sm:py-8 sm:px-8">
           <div key={activeChallenge}>

beta/src/components/MDX/CodeBlock/CodeBlock.module.css

@@ -3,5 +3,5 @@
  */
 
 .codeViewer {
-  padding: 1.5rem 0.5rem;
+  padding: 6px 0.5rem !important;
 }

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

@@ -11,8 +11,7 @@ import {
   SandpackThemeProvider,
 } from '@codesandbox/sandpack-react';
 import rangeParser from 'parse-numeric-range';
-
-import {CodeBlockLightTheme} from '../Sandpack/Themes';
+import {CustomTheme} from '../Sandpack/Themes';
 import styles from './CodeBlock.module.css';
 
 interface InlineHiglight {
@@ -47,7 +46,7 @@ const CodeBlock = React.forwardRef(
       const linesToHighlight = getHighlightLines(metastring);
       const highlightedLineConfig = linesToHighlight.map((line) => {
         return {
-          className: 'bg-github-highlight',
+          className: 'bg-github-highlight dark:bg-opacity-10',
           line,
         };
       });
@@ -81,7 +80,7 @@ const CodeBlock = React.forwardRef(
       <div
         translate="no"
         className={cn(
-          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-white shadow-lg',
+          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
           !noMargin && 'my-8'
         )}>
         <SandpackProvider
@@ -93,7 +92,7 @@ const CodeBlock = React.forwardRef(
               },
             },
           }}>
-          <SandpackThemeProvider theme={CodeBlockLightTheme}>
+          <SandpackThemeProvider theme={CustomTheme}>
             <ClasserProvider
               classes={{
                 'sp-cm': styles.codeViewer,

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

@@ -13,7 +13,7 @@ import {
 import {IconChevron} from 'components/Icon/IconChevron';
 import {NavigationBar} from './NavigationBar';
 import {Preview} from './Preview';
-import {GithubLightTheme} from './Themes';
+import {CustomTheme} from './Themes';
 
 export function CustomPreset({
   isSingleFile,
@@ -45,7 +45,7 @@ export function CustomPreset({
     <>
       <div className="shadow-lg dark:shadow-lg-dark rounded-lg">
         <NavigationBar showDownload={isSingleFile} onReset={onReset} />
-        <SandpackThemeProvider theme={GithubLightTheme}>
+        <SandpackThemeProvider theme={CustomTheme}>
           <div
             ref={sandpack.lazyAnchorRef}
             className="sp-layout rounded-t-none"

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

@@ -2,29 +2,32 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {githubLightTheme, SandpackTheme} from '@codesandbox/sandpack-react';
 import tailwindConfig from '../../../../tailwind.config';
 
-export const GithubLightTheme: SandpackTheme = {
-  ...githubLightTheme,
-
-  typography: {
-    ...githubLightTheme.typography,
-    bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
-    monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
-    fontSize: tailwindConfig.theme.extend.fontSize.code,
-    lineHeight: '24px',
-  },
-};
-
-export const CodeBlockLightTheme: SandpackTheme = {
-  ...githubLightTheme,
+export const CustomTheme = {
   palette: {
-    ...githubLightTheme.palette,
-    defaultBackground: 'transparent',
+    activeText: 'inherit',
+    defaultText: 'inherit',
+    inactiveText: 'inherit',
+    activeBackground: 'inherit',
+    defaultBackground: 'inherit',
+    inputBackground: 'inherit',
+    accent: 'inherit',
+    errorBackground: 'inherit',
+    errorForeground: 'inherit',
+  },
+  syntax: {
+    plain: 'var(--theme-plain)',
+    comment: 'var(--theme-comment)',
+    keyword: 'var(--theme-keyword)',
+    tag: 'var(--theme-tag)',
+    punctuation: 'var(--theme-punctuation)',
+    definition: 'var(--theme-definition)',
+    property: 'var(--theme-property)',
+    static: 'var(--theme-static)',
+    string: 'var(--theme-string)',
   },
   typography: {
-    ...githubLightTheme.typography,
     bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
     monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
     fontSize: tailwindConfig.theme.extend.fontSize.code,

beta/src/components/MDX/TerminalBlock.tsx

@@ -43,7 +43,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
           <IconTerminal className="inline-flex mr-2 self-center" /> Terminal
         </div>
       </div>
-      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code">
+      <div className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre">
         <LevelText type={level} />
         {message}
       </div>

beta/src/components/PageHeading.tsx

@@ -25,7 +25,7 @@ function PageHeading({
     <div className="px-5 sm:px-12 pt-5">
       <div className="max-w-4xl ml-0 2xl:mx-auto">
         {tags ? <Breadcrumbs /> : null}
-        <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5" id="">
+        <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5">
           {title}
           {status ? <em>—{status}</em> : ''}
         </H1>

beta/src/components/Search.tsx

@@ -93,7 +93,6 @@ export const Search: React.FC<SearchProps> = ({
         <link
           rel="preconnect"
           href={`https://${options.appId}-dsn.algolia.net`}
-          crossOrigin="true"
         />
       </Head>
 

beta/src/pages/learn/index.md

@@ -59,7 +59,7 @@ If you're curious which products you use everyday are built with React, you can
 
 ### React uses JavaScript
 
-With React, you will describe visual your logic in JavaScript. This takes some practice. If you're learning JavaScript and React at the same time, you're not alone--but at times, it will be a little bit more challenging! On the upside, **much of learning React is really learning JavaScript,** which means you will take your learnings far beyond React.
+With React, you will describe your visual logic in JavaScript. This takes some practice. If you're learning JavaScript and React at the same time, you're not alone--but at times, it will be a little bit more challenging! On the upside, **much of learning React is really learning JavaScript,** which means you will take your learnings far beyond React.
 
 Check your knowledge level with [this JavaScript overview](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). It will take you between 30 minutes and an hour but you will feel more confident learning React. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are two great resources to use as a reference.
 

beta/src/pages/learn/referencing-values-with-refs.md

@@ -101,7 +101,7 @@ export default function Stopwatch() {
     setInterval(() => {
       // Update the current time every 100ms.
       setNow(Date.now());
-    }, 10);
+    }, 100);
   }
 
   let secondsPassed = 0;
@@ -461,7 +461,7 @@ export default function Toggle() {
 
 ### Fix debouncing
 
-In this example, all button click hanlders are ["debounced"](https://redd.one/blog/debounce-vs-throttle). To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
+In this example, all button click handlers are ["debounced"](https://redd.one/blog/debounce-vs-throttle). To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
 
 This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost.
 

beta/src/styles/sandpack.css

@@ -2,31 +2,81 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+html .sp-wrapper {
+  /* palette */
+  --sp-colors-fg-active: #24292e !important;
+  --sp-colors-fg-default: #959da5 !important;
+  --sp-colors-fg-inactive: #e4e7eb !important;
+  --sp-colors-bg-active: #e4e7eb !important;
+  --sp-colors-bg-default: #ffffff !important;
+  --sp-colors-bg-default-overlay: #ffffff !important;
+  --sp-colors-bg-input: #ffffff !important;
+  --sp-colors-accent: #c8c8fa !important;
+  --sp-colors-bg-error: #ffcdca !important;
+  --sp-colors-fg-error: #811e18 !important;
+  /* syntax */
+  --theme-plain: #24292e;
+  --theme-comment: #6a737d;
+  --theme-keyword: #d73a49;
+  --theme-tag: #22863a;
+  --theme-punctuation: #24292e;
+  --theme-definition: #6f42c1;
+  --theme-property: #005cc5;
+  --theme-static: #032f62;
+  --theme-string: #032f62;
+}
+html.dark .sp-wrapper {
+  --sp-colors-fg-active: #FFFFFF !important;
+  --sp-colors-fg-default: #999999 !important;
+  --sp-colors-fg-inactive: #343434 !important;
+  --sp-colors-bg-active: #343434 !important;
+  --sp-colors-bg-default: #16181D !important;
+  --sp-colors-bg-default-overlay: #16181D !important;
+  --sp-colors-bg-input: #242424 !important;
+  --sp-colors-accent: #6caedd !important;
+  --sp-colors-bg-error: #ffcdca !important;
+  --sp-colors-fg-error: #811e18 !important;
+  /* syntax */
+  --theme-plain: #FFFFFF;
+  --theme-comment: #757575;
+  --theme-keyword: #77B7D7;
+  --theme-tag: #DFAB5C;
+  --theme-punctuation: #ffffff;
+  --theme-definition: #86D9CA;
+  --theme-property: #77B7D7;
+  --theme-static: #C64640;
+  --theme-string: #977CDC;
+}
+
+.sp-tabs, .sp-tab-button:hover {
+  background: none !important;
+}
+
 .sp-tabs .sp-tab-button {
-  color: #087EA4;
+  color: #087ea4;
   padding: 0 4px;
 }
 
 html.dark .sp-tabs .sp-tab-button {
-  color: #149ECA;
+  color: #149eca;
 }
 
 .sp-tabs .sp-tab-button:hover {
-  color: #087EA4;
+  color: #087ea4;
 }
 
 html.dark .sp-tabs .sp-tab-button:hover {
-  color: #149ECA;
+  color: #149eca;
 }
 
 .sp-tabs .sp-tab-button[data-active='true'] {
-  color: #087EA4;
-  border-bottom: 2px solid #087EA4;
+  color: #087ea4;
+  border-bottom: 2px solid #087ea4;
 }
 
 html.dark .sp-tabs .sp-tab-button[data-active='true'] {
-  color: #149ECA;
-  border-bottom: 2px solid #149ECA;
+  color: #149eca;
+  border-bottom: 2px solid #149eca;
 }
 
 .sp-stack .sp-code-editor,
@@ -35,7 +85,7 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
 }
 
 .sp-code-editor .cm-errorLine {
-  background-color: #fff0f0;
+  background-color: rgba(255, 107, 99, 0.10);
   position: relative;
 }
 
@@ -60,57 +110,54 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
  *
  * If you know a better way to keep them from diverging, send a PR.
  */
- .sp-layout {
+.sp-layout {
   border-bottom-left-radius: 0.5rem !important;
   border-bottom-right-radius: 0.5rem !important;
 }
-
-.cm-activeLine {
-  background: rgba(245, 247, 250, var(--tw-bg-opacity)) !important;
-}
-.sp-code-editor {
-  background: white !important;
-}
 .sp-stack {
   height: initial !important;
   width: fit-content !important;
 }
 .sp-cm {
   -webkit-text-size-adjust: none !important;
+  padding: 0 !important;
 }
-.cm-wrap,
-.cm-wrap .cm-gutters {
+.cm-wrap {
   background: transparent !important;
 }
 .sp-pre-placeholder {
   display: block !important;
   margin-top: 0px !important;
   margin-bottom: 0px !important;
+  padding: 18px var(--sp-space-3) !important;
   @apply font-mono !important;
   font-size: 13.6px !important;
   line-height: 24px !important;
+  height: 100%;
+  overflow: scroll;
 }
 .text-xl .sp-pre-placeholder {
   font-size: 16px !important;
   line-height: 24px !important;
 }
 .sp-cm.sp-pristine .cm-scroller {
   overflow: auto !important;
+  padding: 18px 0 !important;
 }
 .sp-layout {
   overflow: initial !important;
-  border:0px solid transparent !important;
+  border: 0px solid transparent !important;
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
 }
-html.dark .sp-layout>:not(:first-child) {
-  border-color: #343A46;
+html.dark .sp-layout > :not(:first-child) {
+  border-color: #343a46;
 }
 html.dark .sp-layout {
-  background-color: #343A46;
+  background-color: #343a46;
 }
 html.dark .sp-loading {
-  background-color: #23272F;
+  background-color: #23272f;
 }
 
 @media (min-width: 768px) {