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