fix(theme): use--vp-c-tip- CSS variable for badge/block colors with typetip

[larsrickert]

tl;dr;: The CSS variables --vp-c-gray, --vp-c-indigo, --vp-c-green, --vp-c-yellow and --vp-c-red should not be directly used for components. Instead only --vp-c-default --vp-c-brand --vp-c-tip --vp-c-success --vp-c-warning and --vp-c-danger should to allow custom themes to easily use custom colors.

Some CSS variables for components (such as badge, custom block and code block) directly used the CSS variables of the color palette (such as --vp-c-yellow) instead of the generic variables (--vp-c-warning etc.).

This lead to the issue that a custom theme can not simply add its own colors for (success/green, danger/red, warning/yellow and tip/purple) because it would not have been applied to all components.

Note that this is not a breaking change since the changed variables in this PR all default to the same values as before but now a custom theme can easily add its own color palette, by e.g. defining it like:

  --vp-c-tip-1: <custom-color>;
  --vp-c-tip-2: <custom-color>;
  --vp-c-tip-3: <custom-color>;
  --vp-c-tip-soft: <custom-color>;