Feature Request | add `font-variant` / `text-transform` option to the global "font" type

Expected Behavior

In raw CSS, I can use the following rule to make text uppercase -

text-transform: uppercase;

I could also achieve something similar using a different rule to get “small-caps” -

font-variant: small-caps;

So it would be cool to allow this to be controlled via a setting manageable for usages of fonts (e.g. on a per-heading basis). In src/js/themes/base.d.ts:

    font?: {
      face?: string;
      family?: string;
      height?: string;
      maxWidth?: string;
      size?: string;
      weight?: number | string;
      variant?: string; // Very epic new rule, I can now make my text "uppercase" so easily!
    };

Note: It is probably crazy to have the entire theme globally uppercase all fonts, but I am assuming this global::font specification is how the other font: {} definitions also work.

Actual Behavior

The current global::font object piece is in src/js/themes/base.d.ts is as follows:

    font?: {
      face?: string;
      family?: string;
      height?: string;
      maxWidth?: string;
      size?: string;
      weight?: number | string;
    };

[jcfilben]

Hey @joybh98 thanks for the update! I think you can go ahead and open up a PR and then we can look into the tests failing

[jcfilben]

is this something a beginner to this project contribute to ?

Yes! @joybh98 definitely feel free to contribute and feel free to reach out with any questions along the way!

I think for this issue we can go ahead and add variant to the global.font theme property, I just want to note for the original author of the issue that the other font definitions in the theme don’t always follow the global.font specification but we would like to eventually move in that direction (but I think that can be handled in separate issues and pull requests).