Result Summary component using React & styled-components

What are you most proud of, and what would you do differently next time?

I am most proud of setting up theme using styled-components:

export const theme = {
 colors: {
  lightRed: "hsl(0, 100%, 67%)",
  orangeyYellow: "hsl(39, 100%, 56%)",
  greenTeal: "hsl(166, 100%, 37%)",
  cobaltBlue: "hsl(234, 85%, 45%)",
  lightSlateBlueBackground: "hsl(252, 100%, 67%)",
  lightRoyalBlueBackground: "hsl(241, 81%, 54%)",
  violetBlueCircle: "hsla(256, 72%, 46%, 1)",
  persianBlueCircle: "hsla(241, 72%, 46%, 0)",
  white: "hsl(0, 0%, 100%)",
  paleBlue: "hsl(221, 100%, 96%)",
  lightLavender: "hsl(241, 100%, 89%)",
  darkGrayBlue: "hsl(224, 30%, 27%)",
  lightGrayBlue: "hsl(224, 30%, 27%, 0.5)",
  lightRedBg: "hsla(0, 100%, 67%, 0.05)",
  orangeyYellowBg: "hsla(39, 100%, 56%, 0.05)",
  greenTealBg: "hsla(166, 100%, 37%, 0.05)",
  cobaltBlueBg: "hsla(234, 85%, 45%, 0.05)",
 },
 fontSizes: {
  base: "18px",
 },
 fontWeights: {
  base: 500,
  bold: 700,
  bolder: 800,
 },
};

import "styled-components";

declare module "styled-components" {
 export interface DefaultTheme {
  colors: {
   lightRed: string;
   orangeyYellow: string;
   greenTeal: string;
   cobaltBlue: string;
   lightSlateBlueBackground: string;
   lightRoyalBlueBackground: string;
   violetBlueCircle: string;
   persianBlueCircle: string;
   white: string;
   paleBlue: string;
   lightLavender: string;
   darkGrayBlue: string;
   lightGrayBlue: string;
   lightRedBg: string;
   orangeyYellowBg: string;
   greenTealBg: string;
   cobaltBlueBg: string;
  };
  fontSizes: {
   base: string;
  };
  fontWeights: {
   base: number;
   bold: number;
   bolder: number;
  };
 }
}

import { GlobalStyles } from "./globalStyles";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme";

function App() {
 return (
  <ThemeProvider theme={theme}>
   <GlobalStyles />
   <StyledContainer>
    <ResultContainer />
    <MarksContainer />
   </StyledContainer>
  </ThemeProvider>
 );
}

export default App;

What challenges did you encounter, and how did you overcome them?

The initial setting up of the project with Vite, and styled-components was a bit confusing. But I was able to complete the setup my googling everything and reading the documentation.