[docs] document css public references

[yinonov]

some of the Vivid design identities are referred to by template styles. to customize components style in a systematic level (rather than per-mutating individual components) tokens are provided in run-time (e.g. typography base, size-density etc'.)

document and provide usage examples in docs

Originally posted by @yinonov in https://github.com/Vonage/vivid-3/issues/768#issuecomment-1296700785

[yinonov]

featured options

--vvd-font-family-upright: arial; /* customize the default font */
--vvd-font-family-monospace: monospace; /* customize the code font */
--vvd-size-font-scale-base: 1rem; /* type: <length> customize the typography scale's base font size */
--vvd-size-density: -1; /* type: <integer> global density integer is used to scale all components sizes. allowed values are 0, 1, -1 (0 being default) */

[yinonov]

In addition to documenting density, the site or code blocks demos can feature a control to choose density value

[yinonov]

should add typography scale to the scope of this issue

[yinonov]

regarding --vvd-size-font-scale-base: 1rem; - Vivid default base is 16px. the idea behind setting the base to 1rem is to align back with browser's default font size where all other typefaces descend from. this is an accessibility issue where if a user enlarge their browser's font size, the component should follow

[olaf-k]

In addition to documenting density, the site or code blocks demos can feature a control to choose density value

I'll address that in a separate PR. edit: tried something in #801 check here: https://vivid-y3heg8gbf2sg.deno.dev/ there's no select for now, so I used the number-field which is slimmer than 3 radio buttons. LMKWYT.