type SemanticFonts = Flattened<{ font: typeof fontSemantic;}>;
Semantic fonts are the base fonts for the theme.They are typically not used directly in the components, but are used to define the base fonts
for the components. Semantic fonts are defined based on their context (i.e. body, interactive).
const theme: Partial<SemanticFonts> = { "font-family-interactive": "var(--cdp-web-font-family-mono)", // Change the font for interactive elements to monospace font};
