Repository: facebook/react
Pull request: [Devtools] Rename Forget badge 

## Summary

The Forget codename needs to be hidden from the UI to avoid confusion. Going forward, we'll be referring to this set of features as part of the larger React compiler. We'll be describing the primary feature that we've built so far as auto-memoization, and this badge helps devs see which components have been automatically memoized by the compiler.

## How did you test this change?

- force Forget badge on with and without the presence of other badges
- confirm colors/UI in light and dark modes
- force badges on for `ElementBadges`, `InspectableElementBadges`, `IndexableElementBadges`
- Running yarn start in packages/react-devtools-shell

[demo video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)


Changed files:
filename: packages/react-devtools-shared/src/devtools/constants.js
patch: @@ -77,7 +77,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-error-border': 'hsl(0, 100%, 92%)',
     '--color-error-text': '#ff0000',
     '--color-expand-collapse-toggle': '#777d88',
-    '--color-forget-badge': '#2683E2',
+    '--color-forget-badge-background': '#2683e2',
+    '--color-forget-badge-background-inverted': '#1a6bbc',
+    '--color-forget-text': '#fff',
     '--color-link': '#0000ff',
     '--color-modal-background': 'rgba(255, 255, 255, 0.75)',
     '--color-bridge-version-npm-background': '#eff0f1',
@@ -195,10 +197,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-commit-gradient-text': '#000000',
     '--color-component-name': '#61dafb',
     '--color-component-name-inverted': '#282828',
-    '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
-    '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
+    '--color-component-badge-background': '#5e6167',
+    '--color-component-badge-background-inverted': '#46494e',
     '--color-component-badge-count': '#8f949d',
-    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.85)',
     '--color-console-error-badge-text': '#000000',
     '--color-console-error-background': '#290000',
     '--color-console-error-border': '#5c0000',
@@ -222,7 +224,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
     '--color-error-border': '#900',
     '--color-error-text': '#f55',
     '--color-expand-collapse-toggle': '#8f949d',
-    '--color-forget-badge': '#2683E2',
+    '--color-forget-badge-background': '#2683e2',
+    '--color-forget-badge-background-inverted': '#1a6bbc',
+    '--color-forget-text': '#fff',
     '--color-link': '#61dafb',
     '--color-modal-background': 'rgba(0, 0, 0, 0.75)',
     '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',

filename: packages/react-devtools-shared/src/devtools/views/Components/Badge.css
patch: @@ -5,7 +5,6 @@
   padding: 0.125rem 0.25rem;
   line-height: normal;
   border-radius: 0.125rem;
-  margin-right: 0.25rem;
   font-family: var(--font-family-monospace);
   font-size: var(--font-size-monospace-small);
 }

filename: packages/react-devtools-shared/src/devtools/views/Components/Element.css
patch: @@ -32,6 +32,7 @@
   --color-component-badge-background: var(
     --color-component-badge-background-inverted
   );
+  --color-forget-badge-background: var(--color-forget-badge-background-inverted);
   --color-component-badge-count: var(--color-component-badge-count-inverted);
   --color-attribute-name: var(--color-attribute-name-inverted);
   --color-attribute-value: var(--color-attribute-value-inverted);

filename: packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css
patch: @@ -1,3 +1,21 @@
 .Root {
-  background-color: var(--color-forget-badge);
+  background-color: var(--color-forget-badge-background);
+  color: var(--color-forget-text);
+  padding-right: 1.75em;
+  position: relative;
+}
+
+.Root::after {
+  bottom: 0;
+  content: '✨';
+  position: absolute;
+  right: 0.25em;
+}
+
+.ForgetToggle {
+  display: flex;
+}
+
+.ForgetToggle > span { /* targets .ToggleContent */
+  padding: 0;
 }

filename: packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js
patch: @@ -11,6 +11,7 @@ import * as React from 'react';
 
 import Badge from './Badge';
 import IndexableDisplayName from './IndexableDisplayName';
+import Toggle from '../Toggle';
 
 import styles from './ForgetBadge.css';
 
@@ -34,10 +35,17 @@ export default function ForgetBadge(props: Props): React.Node {
   const {className = ''} = props;
 
   const innerView = props.indexable ? (
-    <IndexableDisplayName displayName="Forget" id={props.elementID} />
+    <IndexableDisplayName displayName="Memo" id={props.elementID} />
   ) : (
-    'Forget'
+    'Memo'
   );
 
-  return <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>;
+  const onChange = () => {};
+  const title =
+    '✨ This component has been auto-memoized by the React Compiler.';
+  return (
+    <Toggle onChange={onChange} className={styles.ForgetToggle} title={title}>
+      <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>
+    </Toggle>
+  );
 }