Anchor Palette Flavors

Anchor palettes are groups of atomic classes for <a> (anchor 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.

Anchor Palette: Default

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.anchors.palettes.default = {
                            default   : "text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200",
                            error     : "text-rose-500 hover:text-rose-600 dark:text-rose-300 dark:hover:text-rose-200",
                            primary   : "text-blue-500 hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-200",
                            secondary : "text-teal-500 hover:text-teal-600 dark:text-teal-300 dark:hover:text-teal-200",
                            success   : "text-green-600 hover:text-green-700 dark:text-green-300 dark:hover:text-green-200",
                        }

            
                export default appVv

Anchor Palette: Bootstrap Verbiage

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.anchors.palettes.bootstrap = {
                            primary   : "text-blue-500 hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-200",
                            secondary : "text-gray-500 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-200",
                            danger    : "text-rose-500 hover:text-rose-600 dark:text-rose-300 dark:hover:text-rose-200",
                            success   : "text-green-600 hover:text-green-700 dark:text-green-300 dark:hover:text-green-200",
                            warning   : "text-amber-600 hover:text-amber-700 dark:text-amber-300 dark:hover:text-amber-200",
                            info      : "text-cyan-600 hover:text-cyan-700 dark:text-cyan-300 dark:hover:text-cyan-200",
                        }

            
                export default appVv