Color helpers

[asvae]

Should be added as Optional Service
Depends on Colors Service

Usage example:

<span class="text--primary bg--secondary">primary secondary</span>

We had this functionality before, but it disappeared mysteriously 🤪.

• Service should generate CSS dynamically based on colors config. I suggest you look into prior implementation (couple years back should be enough). The idea is that we attach styles to head, then replace that block on colors change. Old implementation was well implemented.
• should support only text and background: text--primary, bg--secondary
• Should have no configuration
• CSS helpers should rely on CSS variables (that are part of Colors Service).
• Document Color helpers as a separate page in Services category. Add installation instructions.
• There are still some places with text--primary, these do nothing and we need to fix these (remove or make do something).

[m0ksem]

Here we have a PR: #936 (partially implemented)

[m0ksem]

• Must be separated plugin (defineVuesticPlugin)
• Have a config (default and user must be able to extend it)
• Custom prefix (or no prefix at all)

Example config:

export let helperConfigValues: HelperConfig[] = [
  {
    stylePrefix: 'bg',
    styleProperty: 'background-color',
  },
  {
    stylePrefix: 'text',
    styleProperty: ['color', 'fill'],
  },
]

[m0ksem]

It is implemented. Need docs. Also, need to think how we can integrate it with Tailwind. I've made it with UnoCSS.