Listbox Palette Flavors

Listbox palettes are groups of atomic classes for A customizable <select> like component for interactions. 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.

Listbox Button Palette: Default

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.listboxes.buttonPalettes.default = {
                            default : "focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 border-gray-300 dark:border-gray-600 bg-gray-50 focus:bg-white hover:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 dark:hover:bg-gray-700 border-gray-500",
                            error   : "text-rose-700 dark:text-rose-200 focus:ring-rose-500 focus:border-rose-500 dark:focus:ring-rose-400 dark:focus:border-rose-400 border-gray-300 dark:border-gray-600 bg-rose-100 focus:bg-rose-50 hover:bg-rose-50 dark:bg-rose-800 dark:focus:bg-rose-700 dark:hover:bg-rose-700 border-gray-500",
                            success : "text-green-700 dark:text-green-200 focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-400 dark:focus:border-green-400 border-gray-300 dark:border-gray-600 bg-green-100 focus:bg-green-50 hover:bg-green-50 dark:bg-green-800 dark:focus:bg-green-700 dark:hover:bg-green-700 border-gray-500",
                        }

            
                export default appVv

Listbox Button Palette: Underlined

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.listboxes.buttonPalettes.underlined = {
                            default : "focus:ring-0 border-x-0 border-t-0 border-b-2 focus:border-b-blue-500 focus:border-x-gray-700 dark:focus:border-b-blue-400 border-b-gray-300 dark:border-b-gray-600 bg-gray-50 focus:bg-white hover:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 dark:hover:bg-gray-700 border-gray-500",
                            error   : "text-rose-700 dark:text-rose-200 focus:ring-0 border-x-0 border-t-0 border-b-2 text-rose-700 dark:text-rose-200 focus:border-b-rose-500 focus:border-x-gray-700 dark:focus:border-b-rose-400 border-b-rose-300 dark:border-b-rose-700 bg-gray-50 focus:bg-white hover:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 dark:hover:bg-gray-700 border-gray-500",
                            success : "text-green-700 dark:text-green-200 focus:ring-0 border-x-0 border-t-0 border-b-2 text-green-700 dark:text-green-200 focus:border-b-green-500 focus:border-x-gray-700 dark:focus:border-b-green-400 border-b-green-300 dark:border-b-green-700 bg-gray-50 focus:bg-white hover:bg-white dark:bg-gray-800 dark:focus:bg-gray-700 dark:hover:bg-gray-700 border-gray-500",
                        }

            
                export default appVv

Listbox Option Palette: Default

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.listboxes.optionPalettes.default = {
                            default : "ui-active:font-bold ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white",
                            error   : "ui-active:font-bold ui-active:bg-rose-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white",
                            success : "ui-active:font-bold ui-active:bg-green-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white",
                        }

            
                export default appVv

Listbox Option Palette: Underlined

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.listboxes.optionPalettes.underlined = {
                            default : "ui-active:font-bold ui-active:bg-white dark:ui-active:bg-gray-700 ui-active:text-blue-500 dark:ui-active:text-blue-300 ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white",
                            error   : "ui-active:font-bold ui-active:bg-white dark:ui-active:bg-gray-700 ui-active:text-rose-500 dark:ui-active:text-rose-300 ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white",
                            success : "ui-active:font-bold ui-active:bg-white dark:ui-active:bg-gray-700 ui-active:text-green-500 dark:ui-active:text-green-300 ui-not-active:bg-white ui-not-active:text-gray-900 dark:ui-not-active:bg-gray-700 dark:ui-not-active:text-white",
                        }

            
                export default appVv