Spike: Check and document how custom theming will work in the template instance

[dzole0311]

Context

Follow-up spike after #1275 to check how custom theming (e.g changing the primary colors etc) would work from the instance side (Next.js) by passing USWDS tokens.

I recently merged a change that bundles our sass styles with the USWDS styles into one CSS file and provides it to the Next.js instance.

However, my approach followed an assumption in terms of theming (e.g. changing the primary color for a specific instance) which was that we will rely on CSS root-variables set by the ThemeProvider where the value of the root variable will be, for example, a hex code for the specific USWDS color token instead of the actual color token name (e.g. cool-red). Therefore, if we want to pass USWDS token names instead of USWDS token values from the instance side to theme VEDA UI components, the current approach should be tweaked because the CSS is already compiled and cool-red doesn't exist per se (it is compiled into a hex code).

I'll want to briefly revisit this question and draft a few PRs on how theming could work from the instance side. My current impression is that if we want to allow users to use USWDS token names (e.g cool-red) for theming from the instance side, we'll probably need to ask them to use sass + install USWDS so that their SASS configuration with the tokens can be compiled to actual css.

Acceptance Criteria

• Try a few approaches that change some of the default USWDS tokens (e.g different colors) from the instance side
• Document the outcome