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

GitOrigin-RevId: 1e62258e1e38d8ab2ce8debc51c53a98f4e915f6

services/web/frontend/js/shared/utils/styles.ts

@@ -0,0 +1,29 @@
+export type OverallTheme = '' | 'light-'
+
+export const fontFamilies = {
+  monaco: ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'monospace'],
+  lucida: ['Lucida Console', 'Source Code Pro', 'monospace'],
+  opendyslexicmono: ['OpenDyslexic Mono', 'monospace'],
+}
+
+export type FontFamily = keyof typeof fontFamilies
+
+export const lineHeights = {
+  compact: 1.33,
+  normal: 1.6,
+  wide: 2,
+}
+
+export type LineHeight = keyof typeof lineHeights
+
+type Options = {
+  fontFamily: FontFamily
+  fontSize: number
+  lineHeight: LineHeight
+}
+
+export const userStyles = ({ fontFamily, fontSize, lineHeight }: Options) => ({
+  fontFamily: fontFamilies[fontFamily]?.join(','),
+  fontSize: `${fontSize}px`,
+  lineHeight: lineHeights[lineHeight],
+})