ListboxOptionUnderlined 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 ListboxOptionUnderlined 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:
javascript
// ./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 optionPalettes colors individually
appVv.listboxes.optionPalettes.underlined.default = '...'
appVv.listboxes.optionPalettes.underlined.error = '...'
appVv.listboxes.optionPalettes.underlined.success = '...'
// Add a new custom app listboxes optionPalettes color name & value
// to the default VvConfig listboxes palette
appVv.listboxes.optionPalettes.underlined.newAppColor = '...'
// Add a new custom app anchor palette
appVv.listboxes.optionPalettes.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 ListboxOptionUnderlined Palette Config Module, you can use:
javascript
import { ListboxOptionUnderlined } from '@obewds/vueventus'
Module Code
ts
// ./src/configs/palettes/ListboxOptionUnderlined.ts
import type { DefaultValidationPaletteColors } from '../../types/DefaultValidationPaletteColors'
export default <DefaultValidationPaletteColors> {
'default': 'ui-active:font-bold ui-active:bg-white dark:ui-active:bg-gray-700 ui-active:text-blue-500 dark:ui-active:text-blue-300 ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white',
error: 'ui-active:font-bold ui-active:bg-white dark:ui-active:bg-gray-700 ui-active:text-rose-500 dark:ui-active:text-rose-300 ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white',
success: 'ui-active:font-bold ui-active:bg-white dark:ui-active:bg-gray-700 ui-active:text-green-500 dark:ui-active:text-green-300 ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white',
}