ButtonSolid Palette Config Module

A solid 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 ButtonSolid 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 solid VvConfig buttons palette colors individually
appVv.buttons.palettes.outline.default = '...'
appVv.buttons.palettes.outline.error = '...'
appVv.buttons.palettes.outline.primary = '...'
appVv.buttons.palettes.outline.secondary = '...'
appVv.buttons.palettes.outline.success = '...'

// Add a new custom app anchor color name & value
// to the solid VvConfig buttons palette
appVv.buttons.palettes.outline.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 ButtonSolid Palette Config Module, you can use:

import { ButtonSolid } from '@obewds/vueventus'

Module Code

// ./src/configs/palettes/ButtonSolid.ts

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

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

Current Version:

v0.61.7