Create a shared module for CSS styles from user settings (#22925)

GitOrigin-RevId: 1e62258e1e38d8ab2ce8debc51c53a98f4e915f6

services/web/frontend/js/features/source-editor/extensions/theme.ts

@@ -3,15 +3,17 @@ import { Annotation, Compartment, TransactionSpec } from '@codemirror/state'
 import { syntaxHighlighting } from '@codemirror/language'
 import { classHighlighter } from './class-highlighter'
 import classNames from 'classnames'
+import {
+  FontFamily,
+  LineHeight,
+  OverallTheme,
+  userStyles,
+} from '@/shared/utils/styles'
 
 const optionsThemeConf = new Compartment()
 const selectedThemeConf = new Compartment()
 export const themeOptionsChange = Annotation.define<boolean>()
 
-export type FontFamily = 'monaco' | 'lucida' | 'opendyslexicmono'
-export type LineHeight = 'compact' | 'normal' | 'wide'
-export type OverallTheme = '' | 'light-'
-
 type Options = {
   fontSize: number
   fontFamily: FontFamily
@@ -53,18 +55,6 @@ const svgUrl = (content: string) =>
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">${content}</svg>`
   )}')`
 
-export const lineHeights: Record<LineHeight, number> = {
-  compact: 1.33,
-  normal: 1.6,
-  wide: 2,
-}
-
-const fontFamilies: Record<FontFamily, string[]> = {
-  monaco: ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'monospace'],
-  lucida: ['Lucida Console', 'Source Code Pro', 'monospace'],
-  opendyslexicmono: ['OpenDyslexic Mono', 'monospace'],
-}
-
 const createThemeFromOptions = ({
   fontSize = 12,
   fontFamily = 'monaco',
@@ -72,9 +62,9 @@ const createThemeFromOptions = ({
   overallTheme = '',
   bootstrapVersion = 3,
 }: Options) => {
-  /**
-   * Theme styles that depend on settings.
-   */
+  // Theme styles that depend on settings.
+  const styles = userStyles({ fontSize, fontFamily, lineHeight })
+
   return [
     EditorView.editorAttributes.of({
       class: classNames(
@@ -82,9 +72,9 @@ const createThemeFromOptions = ({
         'bootstrap-' + bootstrapVersion
       ),
       style: Object.entries({
-        '--font-size': `${fontSize}px`,
-        '--source-font-family': fontFamilies[fontFamily]?.join(', '),
-        '--line-height': lineHeights[lineHeight],
+        '--font-size': styles.fontSize,
+        '--source-font-family': styles.fontFamily,
+        '--line-height': styles.lineHeight,
       })
         .map(([key, value]) => `${key}: ${value}`)
         .join(';'),
@@ -93,9 +83,9 @@ const createThemeFromOptions = ({
     // TODO: set these on document.body, or a new container element for the tooltips, without using a style mod
     EditorView.theme({
       '.cm-tooltip': {
-        '--font-size': `${fontSize}px`,
-        '--source-font-family': fontFamilies[fontFamily]?.join(', '),
-        '--line-height': lineHeights[lineHeight],
+        '--font-size': styles.fontSize,
+        '--source-font-family': styles.fontFamily,
+        '--line-height': styles.lineHeight,
       },
     }),
   ]

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -5,11 +5,7 @@ import useScopeEventEmitter from '../../../shared/hooks/use-scope-event-emitter'
 import useEventListener from '../../../shared/hooks/use-event-listener'
 import useScopeEventListener from '../../../shared/hooks/use-scope-event-listener'
 import { createExtensions } from '../extensions'
-import {
-  lineHeights,
-  setEditorTheme,
-  setOptionsTheme,
-} from '../extensions/theme'
+import { setEditorTheme, setOptionsTheme } from '../extensions/theme'
 import {
   restoreCursorPosition,
   setCursorLineAndScroll,
@@ -63,6 +59,7 @@ import { useThreadsContext } from '@/features/review-panel-new/context/threads-c
 import { useHunspell } from '@/features/source-editor/hooks/use-hunspell'
 import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 import { Permissions } from '@/features/ide-react/types/permissions'
+import { lineHeights } from '@/shared/utils/styles'
 
 function useCodeMirrorScope(view: EditorView) {
   const { fileTreeData } = useFileTreeData()