List middots using hardcoded top/right values

[sowasred2012]

Describe the bug

The list middots are positioned using hardcoded values, it's not clear how they were arrived at, and they don't seem to relate to the surrounding text, so will always appear in the same position regardless of font size etc.

It would be good to craft variables for these values that easily explain why they're positioned where they are. Related to https://github.com/canonical-web-and-design/vanilla-framework/pull/3588 and the issue it addresses.