chore: Organize files under src/foundations/ (#9157)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

docs/development-guide/01-repository-structure.md

@@ -86,7 +86,7 @@ In `/src` there are several important files on the directory root:
   - base-level request methods, responsible for injecting a user's access token to all API requests and intercepting errors
 - **session.ts**
   - methods for handling session management
-- **themeFactory.ts and themes.ts**
+- **foundations/themes.ts and utilities/themes.ts**
   - app-wide styles
 
 The /src directory has several subdirectories:
@@ -158,5 +158,5 @@ The /src directory has several subdirectories:
 
 1. Find where the styles are defined for the component you want to modify
    a. They are likely defined in the feature component's file, e.g. `src/features/<MyFeature>/<SomeComponent>.tsx`.
-2. Avoid making changes in `src/index.css`, `src/themeFactory.ts`, and `src/themes.ts` unless you are intentionally making a global styling change.
+2. Avoid making changes in `src/index.css`, `src/foundations/themes/index.ts`, and unless you are intentionally making a global styling change.
 3. Avoid making changes in `src/components/<ComponentName>` unless you are intentionally making a global styling change, or if the change cannot be made in the feature component file and the change can be controlled through props or composition.

docs/development-guide/13-coding-standards.md

@@ -46,7 +46,7 @@ Function: handleLabelChange
 The styles for Cloud Manager are located in three places:
 
 - `packages/manager/src/index.css` contains global styles, utility styles, and accessibility related styles.
-- `packages/manager/src/themeFactory.ts` and `packages/manager/src/themes.ts` contain code for modifying the default [Material UI](https://mui.com) styles and theme specific styles.
-  - Light mode styles are located in `themeFactory.ts` and dark mode styles are located in `themes.ts`.
-  - The breakpoints can be modified at the end of `themeFactory.ts`.
-- Component-specific styles may be defined either at the end of the component file or in a dedicated file, named `ComponentName.styles.tsx`. Refer to the guidelines outlined in the "Styles" section of [Component Structure](02-component-structure.md#styles). 
+- `packages/manager/src/foundations/themes/index.ts` contain code for modifying the default [Material UI](https://mui.com) styles and theme specific styles.
+  - Light mode styles are located in `/foundations/themes/light.ts` and dark mode styles are located in `/foundations/themes/dark.ts`.
+  - The breakpoints can be modified at `/foundations/breakpoints/index.ts`.
+- Component-specific styles may be defined either at the end of the component file or in a dedicated file, named `ComponentName.styles.tsx`. Refer to the guidelines outlined in the "Styles" section of [Component Structure](02-component-structure.md#styles).

packages/manager/src/LinodeThemeWrapper.tsx

@@ -3,7 +3,7 @@ import { StyledEngineProvider } from '@mui/material/styles';
 import { isProductionBuild } from './constants';
 import { useAuthentication } from './hooks/useAuthentication';
 import { usePreferences } from './queries/preferences';
-import { ThemeName } from './themeFactory';
+import { ThemeName } from './foundations/themes';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { ThemeProvider, Theme } from '@mui/material/styles';
 import {

packages/manager/src/components/ColorPalette/ColorPalette.stories.mdx

@@ -7,8 +7,8 @@ import { ColorPalette } from './ColorPalette';
 
 Add a new color to the palette, especially another tint of gray or blue, only after exhausting the option of using an existing color.
 
-- Colors used in light mode are located in `themeFactory.ts`
-- Colors used in dark mode are located in `themes.ts`
+- Colors used in light mode are located in `foundations/light.ts`
+- Colors used in dark mode are located in `foundations/dark.ts`
 
 If a color does not exist in the current palette and is only used once, consider applying the color conditionally:
 

packages/manager/src/components/LineGraph/MetricsDisplay.test.tsx

@@ -5,7 +5,7 @@ import {
   metricsBySection,
   MetricsDisplay,
 } from 'src/components/LineGraph/MetricsDisplay';
-import { light } from 'src/themes';
+import { light } from 'src/foundations/themes';
 import { formatPercentage } from 'src/utilities/statMetrics';
 
 describe('CPUMetrics', () => {

packages/manager/src/components/core/Grid.tsx

@@ -15,7 +15,7 @@ import { withStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import { Breakpoint } from '@mui/material';
 import type { GridProps } from '@mui/material/Grid';
-import { breakpoints } from 'src/themeFactory';
+import { breakpoints } from 'src/foundations/breakpoints';
 
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

packages/manager/src/foundations/breakpoints.ts

@@ -0,0 +1,11 @@
+import createBreakpoints from '@mui/system/createTheme/createBreakpoints';
+
+export const breakpoints = createBreakpoints({
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1920,
+  },
+});

packages/manager/src/foundations/fonts.ts

@@ -0,0 +1,5 @@
+export const latoWeb = {
+  normal: '"LatoWeb", sans-serif',
+  semiBold: '"LatoWebSemibold", sans-serif',
+  bold: '"LatoWebBold", sans-serif',
+} as const;

packages/manager/src/themes.ts → packages/manager/src/foundations/themes/dark.ts

@@ -1,8 +1,5 @@
-import { createTheme, ThemeOptions } from '@mui/material/styles';
-import { mergeDeepRight } from 'ramda';
-import { base, breakpoints } from './themeFactory';
-
-export const light = createTheme(base);
+import { ThemeOptions } from '@mui/material/styles';
+import { breakpoints } from 'src/foundations/breakpoints';
 
 const primaryColors = {
   main: '#3683dc',
@@ -127,7 +124,7 @@ const genericTableHeaderStyle = {
   },
 };
 
-const darkThemeOptions: ThemeOptions = {
+export const darkTheme: ThemeOptions = {
   name: 'dark',
   breakpoints,
   bg: customDarkModeOptions.bg,
@@ -586,5 +583,3 @@ const darkThemeOptions: ThemeOptions = {
     },
   },
 };
-
-export const dark = createTheme(mergeDeepRight(base, darkThemeOptions));

packages/manager/src/foundations/themes/index.ts

@@ -0,0 +1,85 @@
+import { createTheme } from '@mui/material/styles';
+import _merge from 'lodash/merge';
+
+// Themes & Brands
+import { darkTheme } from 'src/foundations/themes/dark';
+import { lightTheme } from 'src/foundations/themes/light';
+
+// Types & Interfaces
+import { customDarkModeOptions } from 'src/foundations/themes/dark';
+import { latoWeb } from 'src/foundations/fonts';
+import {
+  color,
+  bg,
+  textColors,
+  borderColors,
+} from 'src/foundations/themes/light';
+
+export type ThemeName = 'light' | 'dark';
+
+type Fonts = typeof latoWeb;
+
+type MergeTypes<A, B> = Omit<A, keyof B> &
+  Omit<B, keyof A> &
+  { [K in keyof A & keyof B]: A[K] | B[K] };
+
+type LightModeColors = typeof color;
+type DarkModeColors = typeof customDarkModeOptions.color;
+
+type Colors = MergeTypes<LightModeColors, DarkModeColors>;
+
+type LightModeBgColors = typeof bg;
+type DarkModeBgColors = typeof customDarkModeOptions.bg;
+
+type BgColors = MergeTypes<LightModeBgColors, DarkModeBgColors>;
+
+type LightModeTextColors = typeof textColors;
+type DarkModeTextColors = typeof customDarkModeOptions.textColors;
+type TextColors = MergeTypes<LightModeTextColors, DarkModeTextColors>;
+
+type LightModeBorderColors = typeof borderColors;
+type DarkModeBorderColors = typeof customDarkModeOptions.borderColors;
+
+type BorderColors = MergeTypes<LightModeBorderColors, DarkModeBorderColors>;
+
+/**
+ * Augmenting the Theme and ThemeOptions.
+ * This allows us to add custom fields to the theme.
+ * Avoid doing this unless you have a good reason.
+ */
+declare module '@mui/material/styles/createTheme' {
+  interface Theme {
+    name: ThemeName;
+    bg: BgColors;
+    color: Colors;
+    textColors: TextColors;
+    borderColors: BorderColors;
+    font: Fonts;
+    graphs: any;
+    visually: any;
+    animateCircleIcon?: any;
+    addCircleHoverEffect?: any;
+    applyLinkStyles?: any;
+    applyStatusPillStyles?: any;
+    applyTableHeaderStyles?: any;
+  }
+
+  interface ThemeOptions {
+    name: ThemeName;
+    bg?: LightModeBgColors | DarkModeBgColors;
+    color?: LightModeColors | DarkModeColors;
+    textColors?: LightModeTextColors | DarkModeTextColors;
+    borderColors?: LightModeBorderColors | DarkModeBorderColors;
+    font?: Fonts;
+    graphs?: any;
+    visually?: any;
+    animateCircleIcon?: any;
+    addCircleHoverEffect?: any;
+    applyLinkStyles?: any;
+    applyStatusPillStyles?: any;
+    applyTableHeaderStyles?: any;
+  }
+}
+
+export const light = createTheme(lightTheme);
+export const dark = createTheme(_merge(lightTheme, darkTheme));