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;
- 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 resolveTheme = () => (themeMode === 'light' ? lightTheme : darkTheme);
const onSetThemeMode = () => {
setThemeMode((prev: themeMode) => {
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 7a885e32f7..79b0ad11f1 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -92,7 +92,6 @@ export type UiFlags = {
granularAdminPermissions?: boolean;
frontendHeaderRedesign?: boolean;
dataUsageMultiMonthView?: boolean;
- uiGlobalFontSize?: boolean;
connectionCount?: boolean;
edgeObservability?: boolean;
};
diff --git a/frontend/src/themes/dark-theme.legacy.ts b/frontend/src/themes/dark-theme.legacy.ts
deleted file mode 100644
index c0bba9bb8b..0000000000
--- a/frontend/src/themes/dark-theme.legacy.ts
+++ /dev/null
@@ -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',
- },
- },
- },
-});
diff --git a/frontend/src/themes/theme.legacy.ts b/frontend/src/themes/theme.legacy.ts
deleted file mode 100644
index fb98718f0a..0000000000
--- a/frontend/src/themes/theme.legacy.ts
+++ /dev/null
@@ -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',
- },
- },
- },
-});
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index 04ffcae371..14ecd4a73e 100644
--- a/src/lib/types/experimental.ts
+++ b/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,
diff --git a/src/server-dev.ts b/src/server-dev.ts
index 378e154a9d..77a3e58f32 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -59,7 +59,6 @@ process.nextTick(async () => {
frontendHeaderRedesign: true,
dataUsageMultiMonthView: true,
filterExistingFlagNames: true,
- uiGlobalFontSize: true,
teamsIntegrationChangeRequests: true,
},
},
|