app.vv Config Flavors

The app.vv file is the styling nervous system of a VueVentus powered application. In this app file, the VvConfig base object is leveraged to serve as a design system level default, allowing all global application characteristics in atomic CSS to be expressed in one human-readable resource.

app.vv Config Default

Contributor:@oberocks

                    
                        // ./src/app.vv.ts

                        import { VvConfig } from '@obewds/vueventus'
                        import type { ConfigVv } from '@obewds/vueventus'
                        
                        let appVv: ConfigVv = VvConfig

                        // removes the default underline classes from VueVentus anchors
                        appVv.anchors.text = ''

                        // ...

                        export default appVv

app.vv + appColorPairs() Example

Contributor:@oberocks

                    
                        // ./src/app.vv.ts

                        import { appColorPairs, VvConfig } from '@obewds/vueventus'
                        import type { AppColorPairs, ConfigVv } from '@obewds/vueventus'
                        import appColorsJson from './app.colors.json'

                        interface AppVv extends ConfigVv {
                            colors: AppColorPairs
                        }

                        let appVv: AppVv|ConfigVv = VvConfig

                        appVv.colors = appColorPairs(
                            appColorsJson,
                            'rgba(255, 255, 255, .75)',
                            'rgba(0, 0, 0, .75)'
                        ) as AppColorPairs

                        // Then downstream:
                        // let red500 = appVv.colors.red?.["500"]
                        // let red500_bg = appVv.colors.red?.["500"]?.backgroundColor
                        // let red500_text = appVv.colors.red?.["500"]?.color

                        export default appVv