Use css variables instead of magic numbers

[GVodyanov]

Relevant to nextcloud/mail#9944

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.

Project coverage is 11.13%. Comparing base (546da0b) to head (401f656).
Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...nts/AppNavigation/Settings/SettingsAddressbook.vue	0.00%	1 Missing ⚠️
src/components/ContactsList.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##               main    #4401   +/-   ##
=========================================
  Coverage     11.13%   11.13%           
  Complexity      265      265           
=========================================
  Files           122      122           
  Lines          5539     5539           
  Branches       1188     1188           
=========================================
  Hits            617      617           
  Misses         4801     4801           
  Partials        121      121           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.