Custom classes for the colors
#

By default, Vuestic UI creates custom classes for coloring the text and background colors of elements relative to the global color configuration. To expand the number of generated classes, you need to add the colorsClasses configuration to the GlobalConfig.

The values for colorVariableName and colorValue are taken from the global color config.

Read more about CSS Variables for colors generated by Vuestic UI by default here.

Let's create our config
#

We need to update the colors classes configuration in the our global configuration. The colors classes are an array of objects with class names and CSS properties. For example:

import { createApp } from 'vue'
import { createVuestic } from 'vuestic-ui'
import 'vuestic-ui/css'

createApp(App)
  .use(createVuestic({
    config: {
      colors: { /*...*/ },
      colorsClasses: [
        {
          prefix: 'custom',
          property: ['border-color', 'color'],
        },
        {
          prefix: 'brand',
          property: 'background',
        },
      ],
    }
  }))
  .mount('#app')

The example above shows us the ColorsClassesConfig configuration structure. It's important to note that styleProperty can take either a string or an array of strings as its value.

An example of using the classes we created:

Now I'm have a "primary" color on the borders and text colors

I have a "warning" background

Helper classes configuration API
#

prop	type	Description
colorsClasses	`[{ prefix?: string postfix?: string property?: string \| string[] value?: string }]`	An array of `ColorsClassesConfig` type objects. Used to define new helper classes

Custom classes for the colors #

Let's create our config #

Helper classes configuration API #

Custom classes for the colors
#

Let's create our config
#

Helper classes configuration API
#