ListboxButtonDefault Palette Config Module

A validation focused palette of a variety of color class types for use with listbox components via properties/values with the keys of default, error, and success.

app.vv.ts Use

You'll usually work with the ListboxButtonDefault Palette Config Module after it's already been merged into VueVentus VvConfig data.

Here's what that generally looks like in practice in a real world app context:

// ./src/app.vv.ts

import { VvConfig } from '@obewds/vueventus'
import type { ConfigVv, DefaultPaletteColors } from '@obewds/vueventus'

let appVv: ConfigVv = VvConfig

// ...

// Override the default VvConfig listboxes buttonPalettes colors individually
appVv.listboxes.buttonPalettes.default.default = '...'
appVv.listboxes.buttonPalettes.default.error = '...'
appVv.listboxes.buttonPalettes.default.success = '...'


// Add a new custom app listboxes buttonPalettes color name & value
// to the default VvConfig listboxes palette
appVv.listboxes.buttonPalettes.default.newAppColor = '...'


// Add a new custom app anchor palette
appVv.listboxes.buttonPalettes.myCustomAppPalette = {
    default: '...',
    error: '...',
    success: '...',
    // Add a new custom app anchor color name & value
    anotherAppColor: '...',
} as DefaultPaletteColors

// ...

export default appVv

Import

However, if you need to import the compiled library version of the ListboxButtonDefault Palette Config Module, you can use:

import { ListboxButtonDefault } from '@obewds/vueventus'

Module Code

// ./src/configs/palettes/ListboxButtonDefault.ts

import type { DefaultValidationPaletteColors } from '../../types/DefaultValidationPaletteColors'

export default <DefaultValidationPaletteColors> {
    'default': 'focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 border-gray-300 dark:border-gray-600 bg-gray-50 focus:bg-white hover:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 dark:hover:bg-gray-700 border-gray-500',
    error: 'text-rose-700 dark:text-rose-200 focus:ring-rose-500 focus:border-rose-500 dark:focus:ring-rose-400 dark:focus:border-rose-400 border-gray-300 dark:border-gray-600 bg-rose-100 focus:bg-rose-50 hover:bg-rose-50 dark:bg-rose-800 dark:focus:bg-rose-700 dark:hover:bg-rose-700 border-gray-500',
    success: 'text-green-700 dark:text-green-200 focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-400 dark:focus:border-green-400 border-gray-300 dark:border-gray-600 bg-green-100 focus:bg-green-50 hover:bg-green-50 dark:bg-green-800 dark:focus:bg-green-700 dark:hover:bg-green-700 border-gray-500',
}

Current Version:

v0.61.7