Ground Palette Flavors

Ground palettes are groups of atomic classes for <[any]> (any 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.

Ground Palette: Console

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.grounds.palettes.console = {
                            default   : "font-mono text-gray-200 bg-gray-800 bg-opacity-100 dark:bg-black dark:bg-opacity-80",
                            error     : "font-mono text-rose-200 bg-gray-800 bg-opacity-100 dark:bg-black dark:bg-opacity-80",
                            primary   : "font-mono text-blue-200 bg-gray-800 bg-opacity-100 dark:bg-black dark:bg-opacity-80",
                            secondary : "font-mono text-violet-200 bg-gray-800 bg-opacity-100 dark:bg-black dark:bg-opacity-80",
                            success   : "font-mono text-green-300 bg-gray-800 bg-opacity-100 dark:bg-black dark:bg-opacity-80",
                        }

            
                export default appVv

Ground Palette: Default

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.grounds.palettes.default = {
                            default   : "",
                            error     : "text-white bg-rose-500 dark:bg-rose-600",
                            primary   : "text-white bg-blue-500 dark:bg-blue-600",
                            secondary : "text-white bg-violet-500 dark:bg-violet-600",
                            success   : "text-white bg-green-500 dark:bg-green-600",
                        }

            
                export default appVv

Ground Palette: Monochromatic

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.grounds.palettes.monochromatic = {
                            default   : "text-gray-800 bg-gray-200 dark:bg-gray-800 dark:text-gray-200",
                            error     : "text-rose-800 bg-rose-200 dark:bg-rose-800 dark:text-rose-200",
                            primary   : "text-blue-800 bg-blue-200 dark:bg-blue-800 dark:text-blue-200",
                            secondary : "text-violet-800 bg-violet-200 dark:bg-violet-800 dark:text-violet-200",
                            success   : "text-green-800 bg-green-300 dark:bg-green-800 dark:text-green-300",
                        }

            
                export default appVv

Ground Palette: Pastel

Contributor:@oberocks

            
                // ./src/app.vv.ts

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

                let appVv: ConfigVv = VvConfig

                    
                        appVv.grounds.palettes.pastel = {
                            default   : "text-black bg-gray-100 dark:bg-gray-200",
                            error     : "text-black bg-rose-200 dark:bg-rose-300",
                            primary   : "text-black bg-blue-200 dark:bg-blue-300",
                            secondary : "text-black bg-violet-200 dark:bg-violet-300",
                            success   : "text-black bg-green-300 dark:bg-green-400",
                        }

            
                export default appVv