fix darkmode and font size

Author: tsck

packages/code-editor/src/CodeEditor/CodeEditor.tsx

@@ -289,6 +289,7 @@ const BaseCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
                   createRoot(dom).render(
                     React.createElement(SearchPanel, {
                       view,
+                      darkMode: props.darkMode,
                     }),
                   );
                   return { dom, top: true };

packages/code-editor/src/SearchPanel/SearchPanel.styles.ts

@@ -1,6 +1,7 @@
 import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import {
+  BaseFontSize,
   borderRadius,
   InteractionState,
   shadow,
@@ -15,10 +16,14 @@ const SECTION_HEIGHT = 52;
 const INPUT_WIDTH = 240;
 const INPUT_MIN_WIDTH = 120;
 
-const getBaseContainerStyles = (theme: Theme) => css`
+const getBaseContainerStyles = (
+  theme: Theme,
+  baseFontSize: BaseFontSize,
+) => css`
   background-color: ${color[theme].background[Variant.Secondary][
     InteractionState.Default
   ]};
+  font-size: ${baseFontSize}px;
   border-bottom-left-radius: ${borderRadius[150]}px;
   border-bottom-right-radius: ${borderRadius[150]}px;
   width: 100%;
@@ -62,11 +67,13 @@ const openContainerStyles = css`
 export const getContainerStyles = ({
   theme,
   isOpen,
+  baseFontSize,
 }: {
   theme: Theme;
   isOpen: boolean;
+  baseFontSize: BaseFontSize;
 }) =>
-  cx(getBaseContainerStyles(theme), {
+  cx(getBaseContainerStyles(theme, baseFontSize), {
     [openContainerStyles]: isOpen,
   });
 

packages/code-editor/src/SearchPanel/SearchPanel.tsx

@@ -21,7 +21,7 @@ import Button from '@leafygreen-ui/button';
 import IconButton from '@leafygreen-ui/icon-button';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import TextInput from '@leafygreen-ui/text-input';
-import { Body } from '@leafygreen-ui/typography';
+import { Body, useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
 import { Icon } from '../../../icon/src/Icon';
 
@@ -42,7 +42,11 @@ import {
 } from './SearchPanel.styles';
 import { SearchPanelProps } from './SearchPanel.types';
 
-export function SearchPanel({ view }: SearchPanelProps) {
+export function SearchPanel({
+  view,
+  darkMode,
+  baseFontSize: baseFontSizeProp,
+}: SearchPanelProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchString, setSearchString] = useState('');
   const [replaceString, setReplaceString] = useState('');
@@ -59,7 +63,8 @@ export function SearchPanel({ view }: SearchPanelProps) {
     }),
   );
   const [findCount, setFindCount] = useState(0);
-  const { theme } = useDarkMode();
+  const { theme } = useDarkMode(darkMode);
+  const baseFontSize = useUpdatedBaseFontSize();
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
   const updateSelectedIndex = useCallback(() => {
@@ -204,7 +209,11 @@ export function SearchPanel({ view }: SearchPanelProps) {
 
   return (
     <div
-      className={getContainerStyles({ theme, isOpen })}
+      className={getContainerStyles({
+        theme,
+        isOpen,
+        baseFontSize: baseFontSizeProp || baseFontSize,
+      })}
       data-no-context-menu="true"
     >
       <div className={findSectionStyles}>
@@ -226,6 +235,8 @@ export function SearchPanel({ view }: SearchPanelProps) {
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             value={searchString}
+            baseFontSize={baseFontSizeProp || baseFontSize}
+            darkMode={darkMode}
           />
           <div className={findOptionsContainerStyles}>
             {searchString && (
@@ -259,6 +270,8 @@ export function SearchPanel({ view }: SearchPanelProps) {
             selectMatches(view);
             setSelectedIndex(null);
           }}
+          baseFontSize={baseFontSizeProp || baseFontSize}
+          darkMode={darkMode}
         >
           All
         </Button>
@@ -284,18 +297,24 @@ export function SearchPanel({ view }: SearchPanelProps) {
             value={replaceString}
             onChange={handleReplaceQueryChange}
             onKeyDown={handleReplaceInputKeyDown}
+            baseFontSize={baseFontSizeProp || baseFontSize}
+            darkMode={darkMode}
           />
           <Button
             aria-label="replace button"
             className={replaceButtonStyles}
             onClick={handleReplace}
+            baseFontSize={baseFontSizeProp || baseFontSize}
+            darkMode={darkMode}
           >
             Replace
           </Button>
           <Button
             aria-label="replace all button"
             className={replaceButtonStyles}
             onClick={handleReplaceAll}
+            baseFontSize={baseFontSizeProp || baseFontSize}
+            darkMode={darkMode}
           >
             Replace All
           </Button>

packages/code-editor/src/SearchPanel/SearchPanel.types.ts

@@ -1,5 +1,18 @@
+import { DarkModeProps } from '@leafygreen-ui/lib';
+import { type BaseFontSize } from '@leafygreen-ui/tokens';
+
 import { CodeMirrorView } from '../CodeEditor';
 
-export interface SearchPanelProps {
+export interface SearchPanelProps extends DarkModeProps {
+  /**
+   * Font size of text in the editor.
+   *
+   * @default 13
+   */
+  baseFontSize?: BaseFontSize;
+
+  /**
+   * The CodeMirror view instance.
+   */
   view: CodeMirrorView;
 }