Skip to content

RadioDefault Palette Config Module ​

A default palette of radio colors with properties/values with the keys of default, error, primary, secondary, and success.

app.vv.ts Use ​

You'll usually work with the RadioDefault 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 radios palette colors individually
appVv.radios.palettes.default.default = '...'
appVv.radios.palettes.default.error = '...'
appVv.radios.palettes.default.primary = '...'
appVv.radios.palettes.default.secondary = '...'
appVv.radios.palettes.default.success = '...'

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

// Add a new custom app anchor palette
appVv.radios.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 RadioDefault Palette Config Module, you can use:

javascript
import { RadioDefault } from '@obewds/vueventus'

Module Code ​

ts
// ./src/configs/palettes/RadioDefault.ts

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

export default <DefaultPaletteColors>{
    'default': 'focus:ring-gray-500 text-gray-600 dark:focus:ring-gray-200 dark:text-gray-300',
    error: 'focus:ring-rose-500 text-rose-500 dark:focus:ring-rose-200 dark:text-rose-300',
    primary: 'focus:ring-blue-500 text-blue-500 dark:focus:ring-blue-200 dark:text-blue-300',
    secondary: 'focus:ring-teal-500 text-teal-600 dark:focus:ring-teal-200 dark:text-teal-300',
    success: 'focus:ring-green-600 text-green-600 dark:focus:ring-green-200 dark:text-green-300',
}

Released under the MIT License