feat: configurable global font size (#9155)

This PR sets up the application to accept a value from a variant we
control to set the font size of the application on a global level. If it
fails, the value falls back to the previously set CSS value.

frontend/src/component/App.tsx

@@ -23,6 +23,7 @@ import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
 import { Demo } from './demo/Demo';
 import { LoginRedirect } from './common/LoginRedirect/LoginRedirect';
 import { SecurityBanner } from './banners/internalBanners/SecurityBanner';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -33,6 +34,7 @@ const StyledContainer = styled('div')(() => ({
 export const App = () => {
     const { authDetails } = useAuthDetails();
     const { refetch: refetchUiConfig } = useUiConfig();
+    const uiGlobalFontSizeVariant = useUiFlag('uiGlobalFontSize');
 
     const { user } = useAuthUser();
     const hasFetchedAuth = Boolean(authDetails || user);
@@ -43,6 +45,33 @@ export const App = () => {
         ? routes.filter((route) => !route.enterprise)
         : routes;
 
+    useEffect(() => {
+        let style: HTMLStyleElement | null = null;
+        if (!uiGlobalFontSizeVariant) return;
+        if (!uiGlobalFontSizeVariant.enabled) return;
+
+        try {
+            style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = `
+                html {
+                    font-size: ${uiGlobalFontSizeVariant?.payload?.value}px;
+                    height: 100%;
+                    overflow: auto;
+                    overflow-y: scroll;
+                }
+            `;
+            document.head.appendChild(style);
+        } catch (err) {
+            console.error('Error setting global font size', err);
+        }
+
+        return () => {
+            if (!style) return;
+            document.head.removeChild(style);
+        };
+    }, [JSON.stringify(uiGlobalFontSizeVariant)]);
+
     useEffect(() => {
         if (hasFetchedAuth && Boolean(user?.id)) {
             refetchUiConfig();

frontend/src/interfaces/uiConfig.ts

@@ -95,6 +95,7 @@ export type UiFlags = {
     lifecycleImprovements?: boolean;
     frontendHeaderRedesign?: boolean;
     dataUsageMultiMonthView?: boolean;
+    uiGlobalFontSize?: Variant;
 };
 
 export interface IVersionInfo {

src/lib/types/experimental.ts

@@ -63,7 +63,8 @@ export type IFlagKey =
     | 'sortProjectRoles'
     | 'lifecycleImprovements'
     | 'frontendHeaderRedesign'
-    | 'dataUsageMultiMonthView';
+    | 'dataUsageMultiMonthView'
+    | 'uiGlobalFontSize';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -304,6 +305,17 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_DATA_USAGE_MULTI_MONTH_VIEW,
         false,
     ),
+    uiGlobalFontSize: {
+        name: 'uiGlobalFontSize',
+        enabled: parseEnvVarBoolean(
+            process.env.EXPERIMENTAL_UI_GLOBAL_FONT_SIZE_NAME,
+            false,
+        ),
+        payload: {
+            type: PayloadType.JSON,
+            value: '14',
+        },
+    },
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

website/src/theme/Navbar/Content/styles.module.css

@@ -2,7 +2,7 @@
 Hide color mode toggle in small viewports
  */
 @media (max-width: 996px) {
-  .colorModeToggle {
+    .colorModeToggle {
-    display: none;
+        display: none;
-  }
+    }
 }