chore: remove uiGlobalFontSize flag (#9331)

1-3383

frontend/src/component/common/InstanceStatus/__snapshots__/InstanceStatusBar.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`InstanceStatusBar should warn when the trial has churned 1`] = `
     />
   </svg>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-rviqjc-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-12kykmh-MuiTypography-root"
   >
     <strong>
       Warning!
@@ -60,7 +60,7 @@ exports[`InstanceStatusBar should warn when the trial has expired 1`] = `
     />
   </svg>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-rviqjc-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-12kykmh-MuiTypography-root"
   >
     <strong>
       Warning!
@@ -100,7 +100,7 @@ exports[`InstanceStatusBar should warn when the trial has expired for enterprise
     />
   </svg>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-rviqjc-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-12kykmh-MuiTypography-root"
   >
     <strong>
       Warning!
@@ -137,7 +137,7 @@ exports[`InstanceStatusBar should warn when the trial is about to expire 1`] = `
     />
   </svg>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-rviqjc-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-12kykmh-MuiTypography-root"
   >
     <strong>
       Heads up!
@@ -172,7 +172,7 @@ exports[`InstanceStatusBar should warn when the trial is far from expired 1`] =
     />
   </svg>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-rviqjc-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-12kykmh-MuiTypography-root"
   >
     <strong>
       Heads up!
@@ -205,7 +205,7 @@ exports[`InstanceStatusBar should warn when trialExpiry has passed 1`] = `
     />
   </svg>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-rviqjc-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-12kykmh-MuiTypography-root"
   >
     <strong>
       Warning!

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

@@ -10,7 +10,6 @@ import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStra
 import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrategyCreate';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { ReleasePlanAddChangeRequestDialog } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ChangeRequest/ReleasePlanAddChangeRequestDialog';
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
@@ -63,7 +62,6 @@ export const FeatureStrategyMenu = ({
     const { addChange } = useChangeRequestApi();
     const { refetch: refetchChangeRequests } =
         usePendingChangeRequests(projectId);
-    const uiFontSizeRedesign = useUiFlag('uiGlobalFontSize');
 
     const onClose = () => {
         setAnchor(undefined);
@@ -119,7 +117,6 @@ export const FeatureStrategyMenu = ({
                 onClick={openDefaultStrategyCreationModal}
                 aria-labelledby={popoverId}
                 variant={variant}
-                size={uiFontSizeRedesign ? undefined : size}
                 sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
                 disabled={Boolean(disableReason)}
                 tooltipProps={{
@@ -135,7 +132,6 @@ export const FeatureStrategyMenu = ({
                 environmentId={environmentId}
                 onClick={openMoreStrategies}
                 variant='outlined'
-                size={uiFontSizeRedesign ? undefined : size}
                 hideLockIcon
                 disabled={Boolean(disableReason)}
                 tooltipProps={{

frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap

@@ -131,7 +131,7 @@ exports[`FeedbackCESForm 1`] = `
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-1nhioic-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-103sgwy-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <textarea
                 aria-invalid="false"
@@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
           hidden=""
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ln3ri4-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-z357ol-MuiButtonBase-root-MuiButton-root"
             disabled=""
             tabindex="-1"
             type="submit"

frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`renders correctly with empty version 1`] = `
       title="API details"
     >
       <h2
-        class="css-gtu1fw"
+        class="css-wc53hr"
       >
         Unleash
          
@@ -39,7 +39,7 @@ exports[`renders correctly with ui-config 1`] = `
       title="API details"
     >
       <h2
-        class="css-gtu1fw"
+        class="css-wc53hr"
       >
         Unleash
          
@@ -72,7 +72,7 @@ exports[`renders correctly with versionInfo 1`] = `
       title="API details"
     >
       <h2
-        class="css-gtu1fw"
+        class="css-wc53hr"
       >
         Unleash
          
@@ -109,7 +109,7 @@ exports[`renders correctly without uiConfig 1`] = `
       title="API details"
     >
       <h2
-        class="css-gtu1fw"
+        class="css-wc53hr"
       >
         Unleash
          

frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`should render DrawerMenu 1`] = `
           title="API details"
         >
           <h2
-            className="css-gtu1fw"
+            className="css-wc53hr"
           >
             Unleash
              
@@ -48,7 +48,7 @@ exports[`should render DrawerMenu 1`] = `
               title="Unleash SDK"
             >
               <h2
-                className="css-gtu1fw"
+                className="css-wc53hr"
               >
                 Server SDKs
               </h2>
@@ -63,7 +63,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/node"
@@ -83,7 +83,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/java"
@@ -103,7 +103,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/go"
@@ -124,7 +124,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/rust"
@@ -145,7 +145,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/ruby"
@@ -166,7 +166,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/python"
@@ -186,7 +186,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/dotnet"
@@ -206,7 +206,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/php"
@@ -226,7 +226,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks"
@@ -248,7 +248,7 @@ exports[`should render DrawerMenu 1`] = `
               title="Unleash SDK"
             >
               <h2
-                className="css-gtu1fw"
+                className="css-wc53hr"
               >
                 Frontend SDKs
               </h2>
@@ -263,7 +263,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/unleash-proxy"
@@ -283,7 +283,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/javascript-browser"
@@ -303,7 +303,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/react"
@@ -323,7 +323,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/next-js"
@@ -343,7 +343,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/vue"
@@ -363,7 +363,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/ios-proxy"
@@ -383,7 +383,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/android-proxy"
@@ -403,7 +403,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/flutter"
@@ -423,7 +423,7 @@ exports[`should render DrawerMenu 1`] = `
           >
             <section>
               <h2
-                className="css-gtu1fw"
+                className="css-wc53hr"
               >
                 About
               </h2>
@@ -438,7 +438,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://www.getunleash.io/"
@@ -458,7 +458,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://twitter.com/getunleash"
@@ -478,7 +478,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://www.linkedin.com/company/getunleash"
@@ -498,7 +498,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://github.com/Unleash/unleash"
@@ -518,7 +518,7 @@ exports[`should render DrawerMenu 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://slack.unleash.run"
@@ -567,7 +567,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
           title="API details"
         >
           <h2
-            className="css-gtu1fw"
+            className="css-wc53hr"
           >
             Unleash
              
@@ -595,7 +595,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
               title="Unleash SDK"
             >
               <h2
-                className="css-gtu1fw"
+                className="css-wc53hr"
               >
                 Server SDKs
               </h2>
@@ -610,7 +610,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/node"
@@ -630,7 +630,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/java"
@@ -650,7 +650,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/go"
@@ -671,7 +671,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/rust"
@@ -692,7 +692,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/ruby"
@@ -713,7 +713,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/python"
@@ -733,7 +733,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/dotnet"
@@ -753,7 +753,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/php"
@@ -773,7 +773,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks"
@@ -795,7 +795,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
               title="Unleash SDK"
             >
               <h2
-                className="css-gtu1fw"
+                className="css-wc53hr"
               >
                 Frontend SDKs
               </h2>
@@ -810,7 +810,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/unleash-proxy"
@@ -830,7 +830,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/javascript-browser"
@@ -850,7 +850,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/react"
@@ -870,7 +870,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/next-js"
@@ -890,7 +890,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/vue"
@@ -910,7 +910,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/ios-proxy"
@@ -930,7 +930,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/android-proxy"
@@ -950,7 +950,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://docs.getunleash.io/reference/sdks/flutter"
@@ -970,7 +970,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
           >
             <section>
               <h2
-                className="css-gtu1fw"
+                className="css-wc53hr"
               >
                 About
               </h2>
@@ -985,7 +985,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://www.getunleash.io/"
@@ -1005,7 +1005,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://twitter.com/getunleash"
@@ -1025,7 +1025,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://www.linkedin.com/company/getunleash"
@@ -1045,7 +1045,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://github.com/Unleash/unleash"
@@ -1065,7 +1065,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                     className="MuiListItemText-root MuiListItemText-dense css-tlelie-MuiListItemText-root"
                   >
                     <span
-                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1nhzl8d-MuiTypography-root"
+                      className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary css-1f1ka7g-MuiTypography-root"
                     >
                       <a
                         href="https://slack.unleash.run"

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`renders an empty list correctly 1`] = `
                     />
                   </svg>
                   <div
-                    className="MuiInputBase-root MuiInputBase-colorPrimary css-tv3fxu-MuiInputBase-root"
+                    className="MuiInputBase-root MuiInputBase-colorPrimary css-1mvykop-MuiInputBase-root"
                     onClick={[Function]}
                   >
                     <input
@@ -75,7 +75,7 @@ exports[`renders an empty list correctly 1`] = `
               />
               <button
                 aria-labelledby="useId-0"
-                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1cn29am-MuiButtonBase-root-MuiButton-root"
+                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ind840-MuiButtonBase-root-MuiButton-root"
                 disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
@@ -106,7 +106,7 @@ exports[`renders an empty list correctly 1`] = `
         className="body mui-ccg7sp-bodyContainer"
       >
         <table
-          className="MuiTable-root css-1repbac-MuiTable-root"
+          className="MuiTable-root css-1h5dyuu-MuiTable-root"
           role="table"
         >
           <thead
@@ -119,7 +119,7 @@ exports[`renders an empty list correctly 1`] = `
               role="row"
             >
               <th
-                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-2e57lc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-1hlljex-MuiTableCell-root"
                 scope="col"
                 style={
                   {
@@ -135,7 +135,7 @@ exports[`renders an empty list correctly 1`] = `
               </th>
               <th
                 aria-sort="ascending"
-                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-ixv4xv-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-qdv5ig-MuiTableCell-root"
                 scope="col"
                 style={
                   {
@@ -207,7 +207,7 @@ exports[`renders an empty list correctly 1`] = `
                 </button>
               </th>
               <th
-                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-2e57lc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-1hlljex-MuiTableCell-root"
                 scope="col"
                 style={
                   {
@@ -240,7 +240,7 @@ exports[`renders an empty list correctly 1`] = `
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -262,7 +262,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -294,7 +294,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -410,7 +410,7 @@ exports[`renders an empty list correctly 1`] = `
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -432,7 +432,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -464,7 +464,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -580,7 +580,7 @@ exports[`renders an empty list correctly 1`] = `
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -602,7 +602,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -634,7 +634,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -750,7 +750,7 @@ exports[`renders an empty list correctly 1`] = `
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -772,7 +772,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -804,7 +804,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -920,7 +920,7 @@ exports[`renders an empty list correctly 1`] = `
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -942,7 +942,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -974,7 +974,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-jvmadm-MuiTableCell-root"
                 role="cell"
               >
                 <div

frontend/src/hooks/useThemeMode.ts

@@ -3,11 +3,7 @@ import { useContext } from 'react';
 import { setLocalStorageItem } from 'utils/storage';
 import { lightTheme } from 'themes/theme';
 import { darkTheme } from 'themes/dark-theme';
-import legacyLightTheme from 'themes/theme.legacy';
-import legacyDarkTheme from 'themes/dark-theme.legacy';
 import type { Theme } from '@mui/material/styles/createTheme';
-import { useUiFlag } from './useUiFlag';
-import type { Variant } from 'utils/variants';
 
 interface IUseThemeModeOutput {
     resolveTheme: () => Theme;
@@ -18,25 +14,8 @@ interface IUseThemeModeOutput {
 export const useThemeMode = (): IUseThemeModeOutput => {
     const { themeMode, setThemeMode } = useContext(UIContext);
     const key = 'unleash-theme';
-    const uiGlobalFontSizeEnabled = useUiFlag('uiGlobalFontSize');
 
-    let useNewTheme = false;
+    const resolveTheme = () => (themeMode === 'light' ? lightTheme : darkTheme);
-    if (typeof uiGlobalFontSizeEnabled === 'boolean') {
-        useNewTheme = uiGlobalFontSizeEnabled;
-    } else if (
-        typeof uiGlobalFontSizeEnabled === 'object' &&
-        'name' in uiGlobalFontSizeEnabled
-    ) {
-        useNewTheme = (uiGlobalFontSizeEnabled as Variant).name !== 'disabled';
-    }
-
-    const resolveTheme = () => {
-        if (themeMode === 'light') {
-            return useNewTheme ? lightTheme : legacyLightTheme;
-        }
-
-        return useNewTheme ? darkTheme : legacyDarkTheme;
-    };
 
     const onSetThemeMode = () => {
         setThemeMode((prev: themeMode) => {

frontend/src/interfaces/uiConfig.ts

@@ -92,7 +92,6 @@ export type UiFlags = {
     granularAdminPermissions?: boolean;
     frontendHeaderRedesign?: boolean;
     dataUsageMultiMonthView?: boolean;
-    uiGlobalFontSize?: boolean;
     connectionCount?: boolean;
     edgeObservability?: boolean;
 };

frontend/src/themes/dark-theme.legacy.ts

@@ -1,668 +0,0 @@
-// Remove this file with `uiGlobalFontSize` flag
-
-import { createTheme } from '@mui/material/styles';
-import { alpha } from '@mui/material';
-import { focusable } from 'themes/themeStyles';
-import { colors } from './colors';
-
-const actionColors = {
-    0.54: 'rgba(223, 222, 255, 0.54)',
-    0.32: 'rgba(223, 222, 255, 0.32)',
-    0.12: 'rgba(223, 222, 255, 0.12)',
-    0.08: 'rgba(223, 222, 255, 0.08)',
-    0.05: 'rgba(223, 222, 255, 0.05)',
-};
-
-const theme = {
-    mode: 'dark',
-    breakpoints: {
-        values: {
-            xs: 0,
-            sm: 600,
-            md: 960,
-            lg: 1280,
-            xl: 1536,
-        },
-    },
-    boxShadows: {
-        main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
-        card: '0px 2px 10px rgba(28, 25, 78, 0.12)',
-        elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
-        popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
-        primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
-        separator: '0px 2px 4px rgba(32, 32, 33, 0.12)', // Notifications header
-        accordionFooter: 'inset 0px 2px 4px rgba(32, 32, 33, 0.05)',
-        reverseFooter: 'inset 0px -2px 4px rgba(32, 32, 33, 0.05)',
-    },
-    typography: {
-        fontFamily: 'Sen, Roboto, sans-serif',
-        fontWeightBold: '700',
-        fontWeightMedium: '700',
-        allVariants: { lineHeight: 1.4 },
-        button: {
-            lineHeight: 1.75,
-            '&&&': {
-                fontSize: '16px',
-            },
-        },
-        h1: {
-            fontSize: '1.5rem',
-            lineHeight: 1.875,
-        },
-        h2: {
-            fontSize: `${20 / 16}rem`,
-            fontWeight: '700',
-        },
-        h3: {
-            fontSize: '1rem',
-            fontWeight: '700',
-        },
-        h4: {
-            fontSize: '1rem',
-            fontWeight: '400',
-        },
-        caption: {
-            fontSize: `${12 / 16}rem`,
-        },
-    },
-    fontSizes: {
-        extraLargeHeader: '2.5rem',
-        largeHeader: '2rem',
-        mediumHeader: '1.5rem',
-        mainHeader: '1.25rem',
-        bodySize: '1rem',
-        smallBody: `${14 / 16}rem`,
-        smallerBody: `${12 / 16}rem`,
-    },
-    fontWeight: {
-        thin: 300,
-        medium: 400,
-        semi: 700,
-        bold: 700,
-    },
-    shape: {
-        borderRadius: 4,
-        borderRadiusMedium: 8,
-        borderRadiusLarge: 12,
-        borderRadiusExtraLarge: 20,
-        tableRowHeight: 64,
-        tableRowHeightCompact: 56,
-        tableRowHeightDense: 48,
-    },
-    zIndex: {
-        sticky: 1400,
-    },
-
-    palette: {
-        common: {
-            white: '#EEEEFC', // Switch base (OFF) // Tooltips text color // Text color
-            black: '#A0A0B1', // Switch track (OFF)
-        },
-        text: {
-            primary: '#EEEEFC',
-            secondary: '#A0A0B1',
-            disabled: '#888799',
-        },
-        primary: {
-            main: '#9792ED',
-            light: '#4C4992',
-            // Maybe to move links color to another variable????
-            dark: '#9792ED', // Color used for links and on hover for primary buttons
-            contrastText: '#EEEEFC', // Color used for content when primary.main is used as a background
-        },
-        secondary: {
-            // Used for purple badges and puple light elements
-            main: '#9792ED', // used on icons on these elements
-            light: '#34325E', // used as a bakground on these elements
-            dark: '#EEEEFC', // used for text on these elements
-            border: '#4C4992',
-            contrastText: '#EEEEFC', // Color used for content when info.main is used as a background
-        },
-        info: {
-            // main: '#5483C9',  // used on icons on these elements
-            main: '#a2bbe2', // used on icons on these elements
-            light: '#1A2641', // used as a bakground on these elements
-            dark: '#a2bbe2', // used for text on these elements
-            border: '#1B407A',
-            contrastText: '#EEEEFC', // Color used for content when info.main is used as a background
-        },
-        success: {
-            // main: '#62872F',  // used on icons on these elements
-            main: '#94ae6f', // used on icons on these elements
-            light: '#333D30', // used as a bakground on these elements
-            dark: '#94ae6f', // used for text on these elements
-            border: '#3D600C',
-            contrastText: '#EEEEFC', // Color used for content when success.main is used as a background
-        },
-        warning: {
-            // main: '#9E691C',  // used on icons on these elements
-            main: '#bc7d21', // used on icons on these elements
-            light: '#3B302C', // used as a bakground on these elements
-            dark: '#bc7d21', // used for text on these elements
-            contrastText: '#EEEEFC', // Color used for content when warning.main is used as a background
-            border: '#6C4A19',
-        },
-        error: {
-            // main: '#B93F4A',  // used on error buttons // used on icons on these elements
-            main: '#ff6472', // used on error buttons // used on icons on these elements
-            light: '#3F2835', // used as a bakground on these elements
-            // dark: '#F15260',  // used for text on these elements
-            dark: '#ff6472', // used for text on these elements
-            border: '#8A3E45',
-            contrastText: '#EEEEFC', // Color used for content when error.main is used as a background
-        },
-        web: {
-            main: '#1A4049', // used on sales-related elements
-            contrastText: '#EEEEFC', // Color used for inner text
-        },
-
-        /**
-         *  Used for grey badges, hover elements, and grey light elements
-         */
-        neutral: {
-            main: '#858699', // used on icons on these elements
-            light: '#2B2A3C', // used as a bakground on these elements
-            dark: '#EEEEFC', // used for text on these elements
-            border: '#454360',
-            contrastText: '#EEEEFC', // Color used for text inside badge
-        },
-
-        background: {
-            paper: '#222130', // Background color for all containers
-            default: '#222130',
-            application: '#1A1924',
-            sidebar: '#4C4992',
-            alternative: '#4C4992', // used on the dark theme to shwitch primary main to a darker shade
-            elevation1: '#2B2A3C',
-            elevation2: '#2B2A3C',
-            // elevation2: '#302E42',
-        },
-
-        action: {
-            // Colors used for Icons and Buttons -> this comes from MUI and we overwriting it with our colors
-            active: actionColors[0.54],
-            hover: actionColors[0.05],
-            hoverOpacity: 0.05,
-            selected: actionColors[0.08],
-            selectedOpacity: 0.08,
-            disabled: actionColors[0.32],
-            disabledBackground: actionColors[0.12],
-            disabledOpacity: 0.38,
-            focus: actionColors[0.12],
-            focusOpacity: 0.12,
-            activatedOpacity: 0.12,
-            alternative: colors.purple[1000],
-        },
-
-        /**
-         * General divider
-         */
-        divider: '#39384C',
-
-        /**
-         * Table colors.
-         */
-        table: {
-            headerBackground: '#2B2A3C',
-            headerHover: '#313045',
-            divider: '#323144',
-            rowHover: '#262536',
-        },
-
-        /**
-         * Text highlight effect color. Used when filtering/searching over content
-         */
-        highlight: 'rgba(255, 234, 204, 0.7)',
-
-        /**
-         * Used for the interactive guide spotlight
-         */
-        spotlight: {
-            border: '#8c89bf',
-            outline: '#bcb9f3',
-            pulse: '#bcb9f3',
-        },
-
-        /**
-         * Background color used for the API command in the sidebar
-         */
-        codebox: 'rgba(52, 50, 94, 0.3)',
-
-        /**
-         * Links color
-         */
-        links: '#9792ED',
-
-        /**
-         * Gradient for the login page
-         */
-        loginGradient: {
-            from: '#4C4992',
-            to: '#4944a7',
-        },
-
-        /**
-         * Colors for event log output
-         */
-        eventLog: {
-            diffAdd: '#77AB2E',
-            diffSub: '#df626c',
-            edited: '#EEEEFC',
-        },
-
-        /**
-         * For 'Seen' column on feature flags list and other
-         */
-        seen: {
-            unknown: '#2B2A3C',
-            recent: '#4E6131',
-            inactive: '#875D21',
-            abandoned: '#8A3E45',
-            primary: '#302E42',
-        },
-
-        /**
-         * For Environment Accordion
-         */
-        envAccordion: {
-            disabled: '#2B2A3C',
-            expanded: '#1A1924',
-        },
-
-        /**
-         * MUI grey colors
-         */
-        grey: {
-            // This was to see were these colors are used from MUI
-            // 50: '#A6000E',
-            100: '#888799', // Disabled Switch base (OFF)
-            // 200: '#A6000E',
-            // 300: '#A6000E',
-            // 400: '#A6000E',
-            // 500: '#A6000E',
-            600: '#343348', // slider tooltip background
-            700: '#343348', // Dark tooltip background
-            // 800: '#A6000E',
-            // 900: '#A6000E',
-            // A100: '#A6000E',
-            // A200: '#A6000E',
-            // A400: '#A6000E',
-            // A700: '#A6000E',
-        },
-        variants: colors.variants,
-
-        /**
-         * Dashboard and charts
-         */
-        charts: {
-            gauge: {
-                gradientStart: '#4C4992',
-                gradientEnd: '#9792ED',
-                background: '#39384C',
-                sectionLine: '#8c89bf',
-                text: colors.grey[800],
-            },
-            health: {
-                mainCircleBackground: '#34325E',
-                orbit: '#4C4992',
-                circles: '#2B2A3C',
-                text: colors.grey[500],
-                title: colors.grey[50],
-                healthy: colors.purple[800],
-                stale: colors.red[800],
-                potentiallyStale: colors.orange[800],
-                gradientStale: '#8A3E45',
-                gradientPotentiallyStale: '#875D21',
-            },
-            series: colors.chartSeries,
-        },
-    },
-} as const;
-
-export default createTheme({
-    ...theme,
-    components: {
-        // Skeleton
-        MuiCssBaseline: {
-            styleOverrides: {
-                '#react-joyride-portal ~ .MuiDialog-root': {
-                    zIndex: 1399,
-                },
-
-                '.skeleton': {
-                    '&::before': {
-                        backgroundColor: theme.palette.background.elevation1,
-                    },
-                    '&::after': {
-                        background:
-                            'linear-gradient(90deg, rgba(223, 222, 255, 0) 0, rgba(223, 222, 255, 0.2) 100%, rgba(223, 222, 255, 0.5) 100%, rgba(223, 222, 255, 0))',
-                    },
-                },
-                a: {
-                    color: theme.palette.links,
-                },
-                '.dropdown-outline, .MuiAutocomplete-popper': {
-                    // used for user dropdown, autocomplete, and change request primary button dropdown, notifications dropdown
-                    outline: `1px solid ${theme.palette.divider}`,
-                },
-            },
-        },
-
-        // Links
-        MuiLink: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    ...focusable(theme),
-                    color: theme.palette.links,
-                    '&:hover': {
-                        textDecoration: 'none',
-                    },
-                }),
-            },
-        },
-
-        // Breadcrumb
-        MuiBreadcrumbs: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    color: theme.palette.text.primary,
-                    fontSize: '0.875rem',
-                    '& a': {
-                        color: theme.palette.links,
-                        textDecoration: 'none',
-                        '&:hover': {
-                            textDecoration: 'underline',
-                        },
-                    },
-                }),
-            },
-        },
-
-        // Tables
-        MuiTableHead: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '& th': {
-                        height: theme.shape.tableRowHeightCompact,
-                        backgroundColor: theme.palette.table.headerBackground,
-                        border: 0,
-                        '&:first-of-type': {
-                            borderTopLeftRadius: theme.shape.borderRadiusMedium,
-                            borderBottomLeftRadius:
-                                theme.shape.borderRadiusMedium,
-                        },
-                        '&:last-of-type': {
-                            borderTopRightRadius:
-                                theme.shape.borderRadiusMedium,
-                            borderBottomRightRadius:
-                                theme.shape.borderRadiusMedium,
-                        },
-                    },
-                }),
-            },
-        },
-        MuiTableRow: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '&.MuiTableRow-root:hover': {
-                        //Not all the tables have row hover background. This will add background color on row hover for all the tables
-                        background: theme.palette.table.rowHover, //overwrite action.hover
-                    },
-                }),
-            },
-        },
-        MuiTableCell: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    borderBottomColor: theme.palette.table.divider,
-                }),
-            },
-        },
-
-        // Alerts
-        MuiAlert: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    padding: theme.spacing(2, 3),
-                    borderRadius: theme.shape.borderRadiusMedium,
-                    a: {
-                        color: 'inherit',
-                    },
-                    '> .MuiAlert-icon': {
-                        padding: 0,
-                        opacity: 1,
-                        fontSize: '24px',
-                    },
-                    '> .MuiAlert-message': {
-                        padding: '3px 0 0 0',
-                    },
-                    '&.MuiAlert-standardInfo': {
-                        backgroundColor: theme.palette.info.light,
-                        color: theme.palette.info.contrastText,
-                        border: `1px solid ${theme.palette.info.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.info.main,
-                        },
-                    },
-                    '&.MuiAlert-standardSuccess': {
-                        backgroundColor: theme.palette.success.light,
-                        color: theme.palette.success.contrastText,
-                        border: `1px solid ${theme.palette.success.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.success.main,
-                        },
-                    },
-                    '&.MuiAlert-standardWarning': {
-                        backgroundColor: theme.palette.warning.light,
-                        color: theme.palette.warning.contrastText,
-                        border: `1px solid ${theme.palette.warning.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.warning.main,
-                        },
-                    },
-                    '&.MuiAlert-standardError': {
-                        backgroundColor: theme.palette.error.light,
-                        color: theme.palette.error.contrastText,
-                        border: `1px solid ${theme.palette.error.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.error.main,
-                        },
-                    },
-                }),
-            },
-        },
-
-        // Horizontal menu tabs
-        MuiTabs: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '& .MuiTabs-indicator': {
-                        backgroundColor: theme.palette.background.alternative,
-                        height: '4px',
-                    },
-                    '& .MuiTabs-flexContainer': {
-                        minHeight: '70px',
-                        maxHeight: '70px',
-                    },
-                }),
-            },
-        },
-        MuiTab: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    color: theme.palette.text.primary,
-                    fontSize: '1rem',
-                    textTransform: 'none',
-                    fontWeight: 400,
-                    lineHeight: '1',
-                    minHeight: '62px',
-                    '&:hover': {
-                        backgroundColor: theme.palette.action.hover,
-                    },
-                    '&.Mui-selected': {
-                        color: theme.palette.text.primary,
-                        fontWeight: 700,
-                    },
-                    '& > span': {
-                        color: theme.palette.primary.main, //Based on this color is created the focus color/effect
-                    },
-                    [theme.breakpoints.down('md')]: {
-                        padding: '12px 0px',
-                    },
-                }),
-            },
-        },
-
-        // Environment accordion
-        MuiAccordion: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '&:first-of-type, &:last-of-type': {
-                        borderRadius: theme.shape.borderRadiusLarge,
-                    },
-                    '&.environment-accordion.Mui-expanded': {
-                        outline: `2px solid ${alpha(
-                            theme.palette.background.alternative,
-                            0.6,
-                        )}`,
-                        boxShadow: `0px 2px 8px ${alpha(
-                            theme.palette.primary.main,
-                            0.2,
-                        )}`,
-                    },
-                    '&.accordion-disabled': {
-                        outline: `1px solid ${alpha('#39384C', 0.5)}`,
-                        backgroundColor: theme.palette.background.application,
-                    },
-                    '&.accordion-disabled.Mui-expanded .MuiAccordionSummary-root':
-                        {
-                            borderBottom: `1px solid ${theme.palette.divider}`,
-                        },
-                }),
-            },
-        },
-        MuiAccordionSummary: {
-            styleOverrides: {
-                root: {
-                    '& > .MuiAccordionSummary-content.Mui-expanded': {
-                        margin: '12px 0',
-                    },
-                    '&.Mui-expanded': {
-                        minHeight: '0',
-                    },
-                },
-            },
-        },
-
-        // Project overview, improve switch (ON - state) hover effect color
-        MuiSwitch: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    zIndex: 1,
-                    '&&& > .Mui-checked:hover': {
-                        backgroundColor: actionColors[0.08],
-                    },
-                    '&&& > .Mui-checked.Mui-disabled': {
-                        color: '#423F6E',
-                    },
-                }),
-            },
-        },
-
-        // Overwiteing the action.disabledOpacity from MUI
-        MuiMenuItem: {
-            styleOverrides: {
-                root: {
-                    '&.Mui-disabled': {
-                        opacity: 0.4,
-                    },
-                },
-            },
-        },
-
-        // Inputs background - This is used when we have inputs on a darker background (e.g. edit contstraints, playground)
-        MuiInputBase: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    backgroundColor: theme.palette.background.paper,
-                }),
-            },
-        },
-
-        // Top menu text color
-        MuiAppBar: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    color: theme.palette.text.primary,
-                }),
-            },
-        },
-
-        // For dark theme, primary buttons are a bit darker then the primary.main that we use as a primary color
-        MuiButton: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    borderRadius: '3px',
-                    textTransform: 'none',
-                    '&:not(.Mui-disabled).MuiButton-containedPrimary': {
-                        backgroundColor: theme.palette.background.alternative,
-                        '&:hover': {
-                            backgroundColor: theme.palette.secondary.light,
-                        },
-                    },
-                }),
-            },
-        },
-
-        // Constraints negation icon
-        MuiIconButton: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '&.operator-is-active svg': {
-                        fill: theme.palette.background.application,
-                    },
-                }),
-            },
-        },
-
-        // Inputs
-        MuiOutlinedInput: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    fieldset: {
-                        borderColor: '#646382',
-                    },
-
-                    '&&&:hover fieldset': {
-                        borderColor: '#8B8BA7',
-                    },
-
-                    '&&&.Mui-focused fieldset': {
-                        borderColor: '#9792ED',
-                    },
-
-                    '&&&.Mui-disabled fieldset': {
-                        borderColor: '#47475D',
-                    },
-                }),
-            },
-        },
-
-        // Popovers
-        MuiPopover: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '.MuiPopover-paper': {
-                        outline: `1px solid ${theme.palette.divider}`,
-                    },
-                }),
-            },
-        },
-
-        MuiIcon: {
-            defaultProps: {
-                baseClassName: 'material-symbols-outlined',
-            },
-        },
-    },
-});

frontend/src/themes/theme.legacy.ts

@@ -1,588 +0,0 @@
-// Remove this file with `uiGlobalFontSize` flag
-
-import { createTheme } from '@mui/material/styles';
-import { colors } from './colors';
-import { alpha } from '@mui/material';
-import { focusable } from 'themes/themeStyles';
-
-export const theme = {
-    mode: 'light',
-    breakpoints: {
-        values: {
-            xs: 0,
-            sm: 600,
-            md: 960,
-            lg: 1280,
-            xl: 1536,
-        },
-    },
-    boxShadows: {
-        main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
-        card: '0px 2px 10px rgba(28, 25, 78, 0.12)',
-        elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
-        popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
-        primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
-        separator: '0px 2px 4px rgba(32, 32, 33, 0.12)', // Notifications header
-        accordionFooter: 'inset 0px 2px 4px rgba(32, 32, 33, 0.05)',
-        reverseFooter: 'inset 0px -2px 4px rgba(32, 32, 33, 0.05)',
-    },
-    typography: {
-        fontFamily: 'Sen, Roboto, sans-serif',
-        fontWeightBold: '700',
-        fontWeightMedium: '700',
-        allVariants: { lineHeight: 1.4 },
-        button: {
-            lineHeight: 1.75,
-            '&&&': {
-                fontSize: '16px',
-            },
-        },
-        h1: {
-            fontSize: '1.5rem',
-            lineHeight: 1.875,
-        },
-        h2: {
-            fontSize: `${20 / 16}rem`,
-            fontWeight: '700',
-        },
-        h3: {
-            fontSize: '1rem',
-            fontWeight: '700',
-        },
-        h4: {
-            fontSize: '1rem',
-            fontWeight: '400',
-        },
-        caption: {
-            fontSize: `${12 / 16}rem`,
-        },
-    },
-    fontSizes: {
-        extraLargeHeader: '2.5rem',
-        largeHeader: '2rem',
-        mediumHeader: '1.5rem',
-        mainHeader: '1.25rem',
-        bodySize: '1rem',
-        smallBody: `${14 / 16}rem`,
-        smallerBody: `${12 / 16}rem`,
-    },
-    fontWeight: {
-        thin: 300,
-        medium: 400,
-        semi: 700,
-        bold: 700,
-    },
-    shape: {
-        borderRadius: 4,
-        borderRadiusMedium: 8,
-        borderRadiusLarge: 12,
-        borderRadiusExtraLarge: 20,
-        tableRowHeight: 64,
-        tableRowHeightCompact: 56,
-        tableRowHeightDense: 48,
-    },
-    zIndex: {
-        sticky: 1400,
-    },
-
-    palette: {
-        common: {
-            white: colors.grey[50], // Tooltips text color // Switch base (OFF) // Text color
-            black: colors.grey[900], // Switch track (OFF)
-        },
-        text: {
-            primary: colors.grey[900],
-            secondary: colors.grey[800],
-            disabled: colors.grey[600],
-        },
-        primary: {
-            main: colors.purple[800],
-            light: colors.purple[700],
-            dark: colors.purple[900],
-            contrastText: colors.grey[50], // Color used for content when primary.main is used as a background
-        },
-        secondary: {
-            // Used for purple badges and purple light elements
-            main: colors.purple[800],
-            light: colors.purple[50],
-            dark: colors.purple[900], // Color used for text
-            border: colors.purple[300],
-            contrastText: colors.purple[900], // Color used for text inside badge
-        },
-        info: {
-            main: colors.blue[500],
-            light: colors.blue[50],
-            dark: colors.blue[800], // Color used for text
-            border: colors.blue[200],
-            contrastText: colors.blue[800], // Color used for text inside alert
-        },
-        success: {
-            main: colors.green[600],
-            light: colors.green[50],
-            dark: colors.green[800], // Color used for text
-            border: colors.green[300],
-            contrastText: colors.green[800], // Color used for text inside alert
-        },
-        warning: {
-            main: colors.orange[800],
-            light: colors.orange[100],
-            dark: colors.orange[900], // Color used for text
-            border: colors.orange[500],
-            contrastText: colors.orange[900], // Color used for text inside alert
-        },
-        error: {
-            main: colors.red[700], // used on error buttons // used on icons on these elements
-            light: colors.red[50],
-            dark: colors.red[800], // Color used for text
-            border: colors.red[300],
-            contrastText: colors.red[800], // Color used for text inside alert
-        },
-        web: {
-            main: '#1A4049', // used on sales-related elements
-            contrastText: colors.grey[50], // Color used for inner text
-        },
-
-        /**
-         *  Used for grey badges, hover elements, and grey light elements
-         */
-        neutral: {
-            main: colors.grey[700],
-            light: colors.grey[100],
-            dark: colors.grey[800],
-            border: colors.grey[500],
-            contrastText: colors.grey[800], // Color used for text inside badge
-        },
-
-        background: {
-            paper: colors.grey[50],
-            default: colors.grey[50],
-            application: colors.grey[300],
-            sidebar: colors.purple[800],
-            alternative: colors.purple[800], // used on the dark theme to switch primary main to a darker shade
-            elevation1: colors.grey[100],
-            elevation2: colors.grey[200],
-        },
-
-        action: {
-            // Colors used for Icons and Buttons -> this comes from MUI and we overwriting it with our colors
-            active: colors.action[0.54],
-            hover: colors.action[0.05],
-            hoverOpacity: 0.05,
-            selected: colors.action[0.08],
-            selectedOpacity: 0.08,
-            disabled: colors.action[0.32],
-            disabledBackground: colors.action[0.12],
-            disabledOpacity: 0.38,
-            focus: colors.action[0.12],
-            focusOpacity: 0.12,
-            activatedOpacity: 0.12,
-            alternative: colors.purple[900],
-        },
-
-        /**
-         * General divider
-         */
-        divider: colors.grey[400],
-
-        /**
-         * Table colors.
-         */
-        table: {
-            headerBackground: colors.grey[200],
-            headerHover: colors.grey[300],
-            divider: colors.grey[300],
-            rowHover: colors.grey[100],
-        },
-
-        /**
-         * Text highlight effect color. Used when filtering/searching over content
-         */
-        highlight: colors.orange[200],
-
-        /**
-         * Used for the interactive guide spotlight
-         */
-        spotlight: {
-            border: '#463cfb',
-            outline: '#6058f5',
-            pulse: '#463cfb',
-        },
-
-        /**
-         * Background color used for the API command in the sidebar
-         */
-        codebox: colors.action[0.12],
-
-        /**
-         * Links color
-         */
-        links: colors.purple[900],
-
-        /**
-         * Gradient for the login page
-         */
-        loginGradient: {
-            from: colors.purple[800],
-            to: colors.purple[950],
-        },
-
-        /**
-         * Colors for event log output
-         */
-        eventLog: {
-            diffAdd: colors.green[800],
-            diffSub: colors.red[800],
-            edited: colors.grey[900],
-        },
-
-        /**
-         * For 'Seen' column on feature flags list and other
-         */
-        seen: {
-            unknown: colors.grey[100],
-            recent: colors.green[100],
-            inactive: colors.orange[200],
-            abandoned: colors.red[200],
-            primary: colors.purple[100],
-        },
-
-        /**
-         * For Environment Accordion.
-         */
-        envAccordion: {
-            disabled: colors.grey[100],
-            expanded: colors.grey[200],
-        },
-
-        /**
-         * MUI grey colors
-         */
-        grey: {
-            // This was to see were these colors are used from MUI
-            // 50: '#A6000E',
-            100: colors.grey[100], // Disabled Switch base (OFF)
-            // 200: '#A6000E',
-            // 300: '#A6000E',
-            // 400: '#A6000E',
-            // 500: '#A6000E',
-            600: colors.grey[800], // slider tooltip background
-            700: colors.grey[800], // Dark tooltip background
-            // 800: '#A6000E',
-            // 900: '#A6000E',
-            // A100: '#A6000E',
-            // A200: '#A6000E',
-            // A400: '#A6000E',
-            // A700: '#A6000E',
-        },
-        variants: colors.variants,
-
-        /**
-         * Dashboard and charts
-         */
-        charts: {
-            gauge: {
-                gradientStart: colors.purple[100],
-                gradientEnd: colors.purple[700],
-                background: colors.purple[50],
-                sectionLine: colors.purple[500],
-                text: colors.grey[600],
-            },
-            health: {
-                mainCircleBackground: colors.purple[800],
-                orbit: colors.grey[300],
-                circles: colors.grey[50],
-                text: colors.grey[900],
-                title: colors.grey[50],
-                healthy: colors.purple[800],
-                stale: colors.red[800],
-                potentiallyStale: colors.orange[900],
-                gradientStale: colors.red[300],
-                gradientPotentiallyStale: colors.orange[500],
-            },
-            series: colors.chartSeries,
-        },
-    },
-} as const;
-
-export default createTheme({
-    ...theme,
-    components: {
-        // Skeleton
-        MuiCssBaseline: {
-            styleOverrides: {
-                '#react-joyride-portal ~ .MuiDialog-root': {
-                    zIndex: 1399,
-                },
-
-                '.skeleton': {
-                    '&::before': {
-                        backgroundColor: theme.palette.background.elevation1,
-                    },
-                    '&::after': {
-                        background:
-                            'linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 100%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0))',
-                    },
-                },
-
-                a: {
-                    color: theme.palette.links,
-                },
-            },
-        },
-
-        // Buttons
-        MuiButton: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    borderRadius: '3px',
-                    textTransform: 'none',
-                }),
-            },
-        },
-
-        // Links
-        MuiLink: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    ...focusable(theme),
-                    color: theme.palette.links,
-                    '&:hover': {
-                        textDecoration: 'none',
-                    },
-                }),
-            },
-        },
-
-        // Breadcrumb
-        MuiBreadcrumbs: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    color: theme.palette.text.primary,
-                    fontSize: '0.875rem',
-                    '& a': {
-                        color: theme.palette.links,
-                        textDecoration: 'none',
-                        '&:hover': {
-                            textDecoration: 'underline',
-                        },
-                    },
-                }),
-            },
-        },
-
-        // Tables
-        MuiTableHead: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '& th': {
-                        height: theme.shape.tableRowHeightCompact,
-                        backgroundColor: theme.palette.table.headerBackground,
-                        border: 0,
-                        '&:first-of-type': {
-                            borderTopLeftRadius: theme.shape.borderRadiusMedium,
-                            borderBottomLeftRadius:
-                                theme.shape.borderRadiusMedium,
-                        },
-                        '&:last-of-type': {
-                            borderTopRightRadius:
-                                theme.shape.borderRadiusMedium,
-                            borderBottomRightRadius:
-                                theme.shape.borderRadiusMedium,
-                        },
-                    },
-                }),
-            },
-        },
-        MuiTableRow: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '&.MuiTableRow-root:hover': {
-                        //Not all the tables have row hover background. This will add background color on row hover for all the tables
-                        background: theme.palette.table.rowHover, //overwrite action.hover
-                    },
-                }),
-            },
-        },
-        MuiTableCell: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    borderBottomColor: theme.palette.table.divider,
-                }),
-            },
-        },
-
-        // Alerts
-        MuiAlert: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    padding: theme.spacing(2, 3),
-                    borderRadius: theme.shape.borderRadiusMedium,
-                    a: {
-                        color: 'inherit',
-                    },
-                    '> .MuiAlert-icon': {
-                        padding: 0,
-                        opacity: 1,
-                        fontSize: '24px',
-                    },
-                    '> .MuiAlert-message': {
-                        padding: '3px 0 0 0',
-                    },
-                    '&.MuiAlert-standardInfo': {
-                        backgroundColor: theme.palette.info.light,
-                        color: theme.palette.info.dark,
-                        border: `1px solid ${theme.palette.info.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.info.main,
-                        },
-                    },
-                    '&.MuiAlert-standardSuccess': {
-                        backgroundColor: theme.palette.success.light,
-                        color: theme.palette.success.dark,
-                        border: `1px solid ${theme.palette.success.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.success.main,
-                        },
-                    },
-                    '&.MuiAlert-standardWarning': {
-                        backgroundColor: theme.palette.warning.light,
-                        color: theme.palette.warning.dark,
-                        border: `1px solid ${theme.palette.warning.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.warning.main,
-                        },
-                    },
-                    '&.MuiAlert-standardError': {
-                        backgroundColor: theme.palette.error.light,
-                        color: theme.palette.error.dark,
-                        border: `1px solid ${theme.palette.error.border}`,
-                        '& .MuiAlert-icon': {
-                            color: theme.palette.error.main,
-                        },
-                    },
-                }),
-            },
-        },
-
-        // Horizontal menu tabs
-        MuiTabs: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '& .MuiTabs-indicator': {
-                        height: '4px',
-                    },
-                    '& .MuiTabs-flexContainer': {
-                        minHeight: '70px',
-                        maxHeight: '70px',
-                    },
-                }),
-            },
-        },
-        MuiTab: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    color: theme.palette.text.primary,
-                    fontSize: '1rem',
-                    textTransform: 'none',
-                    fontWeight: 400,
-                    lineHeight: '1',
-                    minHeight: '62px',
-                    '&:hover': {
-                        backgroundColor: theme.palette.action.hover,
-                    },
-                    '&.Mui-selected': {
-                        color: theme.palette.text.primary,
-                        fontWeight: 700,
-                    },
-                    '& > span': {
-                        color: theme.palette.primary.main, //Based on this color is created the focus color/effect
-                    },
-                    [theme.breakpoints.down('md')]: {
-                        padding: '12px 0px',
-                    },
-                }),
-            },
-        },
-
-        // Environment accordion
-        MuiAccordion: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    '&:first-of-type, &:last-of-type': {
-                        borderRadius: theme.shape.borderRadiusLarge,
-                    },
-                    '&.environment-accordion.Mui-expanded': {
-                        outline: `2px solid ${alpha(
-                            theme.palette.background.alternative,
-                            0.6,
-                        )}`,
-                        boxShadow: `0px 2px 8px ${alpha(
-                            theme.palette.primary.main,
-                            0.2,
-                        )}`,
-                    },
-                }),
-            },
-        },
-        MuiAccordionSummary: {
-            styleOverrides: {
-                root: {
-                    '& > .MuiAccordionSummary-content.Mui-expanded': {
-                        margin: '12px 0',
-                    },
-                    '&.Mui-expanded': {
-                        minHeight: '0',
-                    },
-                },
-            },
-        },
-
-        // Project overview, improve switch (OFF - state) focus effect color
-        MuiSwitch: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    zIndex: 1,
-                    '.MuiSwitch-switchBase:not(.Mui-checked) .MuiTouchRipple-child':
-                        {
-                            color: theme.palette.action.disabled,
-                        },
-                }),
-            },
-        },
-
-        // Overwiteing the action.disabledOpacity from MUI
-        MuiMenuItem: {
-            styleOverrides: {
-                root: {
-                    '&.Mui-disabled': {
-                        opacity: 0.66,
-                    },
-                },
-            },
-        },
-
-        // Inputs background - This is used when we have inputs on a grey background (e.g. edit contstraints, playground)
-        MuiInputBase: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    backgroundColor: theme.palette.background.paper,
-                }),
-            },
-        },
-
-        // Top menu text color
-        MuiAppBar: {
-            styleOverrides: {
-                root: ({ theme }) => ({
-                    color: theme.palette.text.primary,
-                }),
-            },
-        },
-
-        MuiIcon: {
-            defaultProps: {
-                baseClassName: 'material-symbols-outlined',
-            },
-        },
-    },
-});

src/lib/types/experimental.ts

@@ -64,7 +64,6 @@ export type IFlagKey =
     | 'uniqueSdkTracking'
     | 'frontendHeaderRedesign'
     | 'dataUsageMultiMonthView'
-    | 'uiGlobalFontSize'
     | 'connectionCount'
     | 'teamsIntegrationChangeRequests'
     | 'edgeObservability';
@@ -308,10 +307,6 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_DATA_USAGE_MULTI_MONTH_VIEW,
         false,
     ),
-    uiGlobalFontSize: parseEnvVarBoolean(
-        process.env.EXPERIMENTAL_UI_GLOBAL_FONT_SIZE_NAME,
-        false,
-    ),
     connectionCount: parseEnvVarBoolean(
         process.env.EXPERIMENTAL_CONNECTION_COUNT,
         false,

src/server-dev.ts

@@ -59,7 +59,6 @@ process.nextTick(async () => {
                         frontendHeaderRedesign: true,
                         dataUsageMultiMonthView: true,
                         filterExistingFlagNames: true,
-                        uiGlobalFontSize: true,
                         teamsIntegrationChangeRequests: true,
                     },
                 },