ButtonOutline Palette Config Module

An outline themed palette of button colors with properties/values with the keys of default, error, primary, secondary, and success.

app.vv.ts Use

You'll usually work with the ButtonOutline 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 outline VvConfig buttons palette colors individually
appVv.buttons.palettes.solid.default = '...'
appVv.buttons.palettes.solid.error = '...'
appVv.buttons.palettes.solid.primary = '...'
appVv.buttons.palettes.solid.secondary = '...'
appVv.buttons.palettes.solid.success = '...'

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

// Add a new custom app anchor palette
appVv.buttons.palettes.myCustomAppPalette = {
    default: '...',
    error: '...',
    primary: '...',
    secondary: '...',
    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 ButtonOutline Palette Config Module, you can use:

import { ButtonOutline } from '@obewds/vueventus'

Module Code

// ./src/configs/palettes/ButtonOutline.ts

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

export default <DefaultPaletteColors>{
    'default': 'text-gray-500 dark:text-gray-300 hover:text-white focus:text-white dark:hover:text-white dark:focus:text-white hover:bg-gray-500 focus:bg-gray-500 active:bg-gray-600 border-gray-300 hover:border-gray-500 focus:ring-gray-400 dark:focus:ring-gray-200 focus:border-gray-50 dark:focus:border-gray-900',
    error: 'text-rose-500 dark:text-rose-300 hover:text-white dark:hover:text-white focus:text-white dark:focus:text-white hover:bg-rose-500 focus:bg-rose-500 active:bg-rose-600 border-rose-300 hover:border-rose-500 focus:ring-rose-400 dark:focus:ring-rose-200 focus:border-rose-50 dark:focus:border-rose-900',
    primary: 'text-blue-500 dark:text-blue-300 hover:text-white dark:hover:text-white focus:text-white dark:focus:text-white hover:bg-blue-500 focus:bg-blue-500 active:bg-blue-600 border-blue-300 hover:border-blue-500 focus:ring-blue-400 dark:focus:ring-blue-200 focus:border-blue-50 dark:focus:border-blue-900',
    secondary: 'text-teal-500 dark:text-teal-300 hover:text-white dark:hover:text-white focus:text-white dark:focus:text-white hover:bg-teal-500 focus:bg-teal-500 active:bg-teal-600 border-teal-300 hover:border-teal-500 focus:ring-teal-400 dark:focus:ring-teal-200 focus:border-teal-50 dark:focus:border-teal-900',
    success: 'text-green-500 dark:text-green-300 hover:text-white dark:hover:text-white focus:text-white dark:focus:text-white hover:bg-green-500 focus:bg-green-500 active:bg-green-600 border-green-300 hover:border-green-500 focus:ring-green-400 dark:focus:ring-green-200 focus:border-green-50 dark:focus:border-green-900',
}

Current Version:

v0.61.7