CSS Refactor

[sadiqkhoja]

From #164 (comment)

• Naming things: maybe this will be better addressed with PrimeVue 4, but it would be nice if we had fewer magic values and more use of system of CSS variables or other named values. Will hopefully make it easier to understand why something changes, e.g. font-weight 400 to 500 (or vice versa), font-size changes, accommodations for spacing moving up or down component/DOM hierarchy
• Various use of negative margins is concerning. Especially where it seems to be counteracting spacing controlled by the same general thing (FormPanel). Would generally like to do a focused overhaul on how layout/spacing/alignment/etc are handled.
  • In such focused overhaul, also want to be mindful of RTL where we have styles producing asymmetric horizontal spacing/alignment
• In general, worth thinking about:
  • System for naming and categorical structuring of components
  • How that can/will align with designs in Figma, tokens in PrimeVue, our own token system