InputUnderlined Palette Config Module

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

app.vv.ts Use

You'll usually work with the InputUnderlined 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 underlined VvConfig inputs palette colors individually
appVv.inputs.palettes.underlined.default = '...'
appVv.inputs.palettes.underlined.error = '...'
appVv.inputs.palettes.underlined.secondary = '...'

// Bring your overrides to the VvConfig textareas palettes underlined object
appVv.textareas.palettes.underlined = appVv.inputs.palettes.underlined


// Add a new custom app anchor color name & value
// to the underlined VvConfig inputs palette
appVv.inputs.palettes.underlined.newAppColor = '...'

// Bring your overrides to the VvConfig textareas palettes underlined object
appVv.textareas.palettes.underlined.newAppColor = appVv.inputs.palettes.underlined.newAppColor


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

// Bring your overrides to the VvConfig textareas palettes
appVv.textareas.palettes.myCustomAppPalette = appVv.inputs.palettes.myCustomAppPalette


// ...


export default appVv

Import

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

import { InputUnderlined } from '@obewds/vueventus'

Module Code

// ./src/configs/palettes/InputUnderlined.ts

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

export default <DefaultValidationPaletteColors>{
    'default': 'focus:ring-0 border-x-0 border-t-0 border-b-2 focus:border-b-blue-500 focus:border-x-gray-700 dark:focus:border-b-blue-400 border-b-gray-300 dark:border-b-gray-600 bg-gray-50 focus:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 selection:bg-blue-600 dark:selection:bg-blue-500 selection:text-white',
    error: 'focus:ring-0 border-x-0 border-t-0 border-b-2 text-rose-700 dark:text-rose-200 focus:border-b-rose-500 focus:border-x-gray-700 dark:focus:border-b-rose-400 border-b-rose-300 dark:border-b-rose-700 bg-gray-50 focus:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 placeholder:text-rose-400 placeholder:dark:text-rose-400 selection:bg-rose-600 dark:selection:bg-rose-500 selection:text-white',
    success: 'focus:ring-0 border-x-0 border-t-0 border-b-2 text-green-700 dark:text-green-200 focus:border-b-green-500 focus:border-x-gray-700 dark:focus:border-b-green-400 border-b-green-300 dark:border-b-green-700 bg-gray-50 focus:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 placeholder:text-green-500 placeholder:dark:text-green-500 selection:bg-green-600 dark:selection:bg-green-500 selection:text-white',
}

Current Version:

v0.61.7