Improve the documentation on available CSS variables

[sebnitu]

Problem

Currently we're implementing a "file" approach for documentation of CSS and SCSS variables. For CSS vars, this can be very cryptic since a lot of custom properties are set and output using core functions and mixins. We should improve this by displaying the true names and values for every CSS variable used by a component. Here are a few options to explore:

• Using JavaScript, get the computed styles: e.g: searching for vars with --vb-[component]-* etc.
• Use the core functions/mixins to store CSS var usage and find a way to output that data to the front-end.
• Crawl the output CSS file for all CSS variable definitions and usages.