12Parser process id: 12codeclimate-parser socket not presentwaiting 1s...W, [2022-10-31T19:30:00.941696 #1]  WARN -- : Skipping ./apps/server/migrations/change-case-of-storage-and-gql.ts due to CC::Parser::Client::HTTPErrorW, [2022-10-31T19:30:00.942233 #1]  WARN -- : Response status: 422W, [2022-10-31T19:30:10.475738 #1]  WARN -- : Skipping ./apps/studio/providers/Theme.tsx due to CC::Parser::Client::HTTPErrorW, [2022-10-31T19:30:10.578032 #1]  WARN -- : Response status: 422W, [2022-10-31T19:30:13.775996 #1]  WARN -- : Skipping apps/studio/types.ts due to CC::Parser::Client::HTTPErrorW, [2022-10-31T19:30:13.776403 #1]  WARN -- : Response status: 422W, [2022-10-31T19:30:16.860534 #1]  WARN -- : Skipping ./apps/studio/new-app-flow/NewApp.tsx due to CC::Parser::Client::HTTPErrorW, [2022-10-31T19:30:16.860594 #1]  WARN -- : Response status: 422

import React, {  createContext,  ReactElement,  useContext,  useEffect,  useMemo,  useState,} from "react";import { useWindowDimensions, View } from "react-native";import * as styles from "@/studio/styles";export enum THEME_TYPES {  LIGHT = "LIGHT",  DARK = "DARK",  WAITLIST = "WAITLIST",}export enum SCREEN_SIZE {  SMALL = "SMALL",  MEDIUM = "MEDIUM",  LARGE = "LARGE",}// This isn't perfect and doesn't cover all cases but is slightly stricter than stringtype RGB = `rgb(${number}, ${number}, ${number})`;type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;type HEX = `#${string}`;type Color = RGB | RGBA | HEX;export type StudioTheme = {  type: THEME_TYPES;  background: Color;  backgroundSecondary: Color;  text: Color;  secondary: Color;  highlight: Color;  // I couldn't find a more semantically meaningful name or think of how it'll be re-used so did this for now  selectComponentBackground: Color;  inputBackground: Color;  inputBorderColor: Color;  shadowColor: Color;  shadowOpacity: number;};const themes: { [key in THEME_TYPES]: StudioTheme } = {  [THEME_TYPES.LIGHT]: {    type: THEME_TYPES.LIGHT,    background: "#f5f8fa",    backgroundSecondary: "#eee",    text: "#000",    secondary: "#444",    highlight: "#4970DA",    selectComponentBackground: "#F5F5F5",    inputBackground: "#fff",    inputBorderColor: "#888",    shadowColor: "#000",    shadowOpacity: 0.15,  },  [THEME_TYPES.DARK]: {    type: THEME_TYPES.DARK,    background: "#141013",    backgroundSecondary: "#17161B",    text: "#fff",    secondary: "#ddd",    highlight: "#4970DA",    selectComponentBackground: "#F5F5F5",    inputBackground: "#fff",    inputBorderColor: "#888",    shadowColor: "#fff",    shadowOpacity: 0.15,  },  [THEME_TYPES.WAITLIST]: {    type: THEME_TYPES.WAITLIST,    background: "#091121",    backgroundSecondary: "#070D24",    text: "#fff",    secondary: "#aaa",    highlight: "#4970DA",    selectComponentBackground: "#F5F5F5",    inputBackground: "#fff",    inputBorderColor: "#888",    shadowColor: "#ddd",    shadowOpacity: 0.1,  },};interface StudioThemeContextType {  themeEnum: THEME_TYPES;  setTheme: (_: THEME_TYPES) => void;  studioTheme: StudioTheme;  width: number;  height: number;  screenSize: SCREEN_SIZE;}const StudioThemeContext = createContext<StudioThemeContextType>({  themeEnum: THEME_TYPES.LIGHT,  setTheme: (_: THEME_TYPES) => {},  studioTheme: themes[THEME_TYPES.LIGHT],  width: 0,  height: 0,  screenSize: SCREEN_SIZE.MEDIUM,});// TODO determine better bounds for screensize and potentially incorporate mobileconst getScreenSize = (width: number): SCREEN_SIZE => {  if (width > 1200) {    return SCREEN_SIZE.LARGE;  } else if (width > 1000) {    return SCREEN_SIZE.MEDIUM;  } else {    return SCREEN_SIZE.SMALL;  }};export const StyleProvider = ({ children }: { children: ReactElement }) => {  const { width, height } = useWindowDimensions();  const [themeEnum, setThemeEnum] = useState<THEME_TYPES>(THEME_TYPES.LIGHT);  const screenSize = useMemo(() => getScreenSize(width), [width]);  useEffect(() => {    document.body.style.color = themes[themeEnum].text;    document.body.style.backgroundColor = themes[themeEnum].background;  }, [themeEnum]);  const theme = themes[themeEnum];  return (    <StudioThemeContext.Provider      value={{        themeEnum: themeEnum,        setTheme: setThemeEnum,        studioTheme: theme,        width,        height,        screenSize,      }}    >      <View        style={{          backgroundColor: theme.background,          height: "100%",          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.          accentColor: styles.sutroPurple,        }}        testID="studio-body"      >        {children}      </View>    </StudioThemeContext.Provider>  );};export const useStudioTheme = () => useContext(StudioThemeContext);