Radio Palette Flavors

Anchor palettes are groups of atomic classes for <input type="radio"> (radio input HTML tag) application elements. Palettes consist of property/value pairs where the property is something specific to your color, app, brand, or industry, while the value defines that property's characteristics with CSS classes.

Radio Palette: Default

Contributor:@oberocks

            
                // ./src/app.vv.ts

                import { VvConfig } from '@obewds/vueventus'
                import type { ConfigVv } from '@obewds/vueventus'

                let appVv: ConfigVv = VvConfig

                    
                        appVv.radios.baseColors = "bg-gray-100 border-gray-400 dark:border-black ring-offset-white dark:ring-offset-gray-800"

                        appVv.radios.palettes.default = {
                            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",
                        }

            
                export default appVv