feat(framework): add new blueprint global options (#15177)

packages/docs/src/data/nav-alpha.json

@@ -26,6 +26,7 @@
     "activeIcon": "mdi-image-edit",
     "items": [
       "application-layout",
+      "blueprints",
       "display-and-platform",
       "global-configuration",
       "icon-fonts",

packages/docs/src/pages/en/features/blueprints.md

@@ -0,0 +1,52 @@
+---
+meta:
+  title: Blueprints
+  description: Setup your entire application with pre-made or custom styling and designs
+  keywords: vuetify blueprints, vuetify presets, vuetify schemas
+related:
+  - /features/defaults/
+  - /features/theme/
+  - /features/presets/
+---
+
+# Blueprints
+
+Vuetify blueprints are a new way to pre-configure your entire application with a complete design system.
+
+![Blueprints Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/blueprints/blueprint.png)
+
+---
+
+## How they work
+
+Blueprints are a collection of Vuetify configuration options that assign default values for components, colors, language, and more.
+
+## Usage
+
+More to follow..
+
+## Core Design systems
+
+More to follow...
+
+### MD1
+
+More to follow...
+
+### MD2
+
+More to follow...
+
+### MD3
+
+More to follow...
+
+## Create your own
+
+More to follow...
+
+## Material Studies
+
+More to follow...
+
+<backmatter />

packages/vuetify/dev/vuetify.js

@@ -3,8 +3,10 @@ import { createVuetify } from 'vuetify/src/entry-bundler'
 import { aliases, mdi } from 'vuetify/src/iconsets/mdi'
 import { fa } from 'vuetify/src/iconsets/fa-svg'
 import { ar, en, ja, sv } from 'vuetify/src/locale'
+import { md1 } from 'vuetify/src/blueprints/md1'
 
 export default createVuetify({
+  blueprint: md1,
   locale: {
     messages: {
       en,

packages/vuetify/src/blueprints/index.ts

@@ -0,0 +1,3 @@
+export { md1 } from './md1'
+export { md2 } from './md2'
+export { md3 } from './md3'

packages/vuetify/src/blueprints/md1.ts

@@ -0,0 +1,65 @@
+// Icons
+import { mdi } from '@/iconsets/mdi'
+
+// Types
+import type { Blueprint } from '@/framework'
+
+export const md1: Blueprint = {
+  defaults: {
+    global: {
+      rounded: 'sm',
+    },
+    VAutocomplete: {
+      variant: 'underlined',
+    },
+    VBanner: {
+      color: 'primary',
+    },
+    VBtn: {
+      color: 'primary',
+      rounded: 0,
+    },
+    VCheckbox: {
+      color: 'secondary',
+    },
+    VCombobox: {
+      variant: 'underlined',
+    },
+    VSelect: {
+      variant: 'underlined',
+    },
+    VSlider: {
+      color: 'primary',
+    },
+    VTabs: {
+      color: 'primary',
+    },
+    VTextarea: {
+      variant: 'underlined',
+    },
+    VTextField: {
+      variant: 'underlined',
+    },
+  },
+  icons: {
+    defaultSet: 'mdi',
+    sets: {
+      mdi,
+    },
+  },
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#3F51B5',
+          'primary-darken-1': '#303F9F',
+          'primary-lighten-1': '#C5CAE9',
+          secondary: '#FF4081',
+          'secondary-darken-1': '#F50057',
+          'secondary-lighten-1': '#FF80AB',
+          accent: '#009688',
+        },
+      },
+    },
+  },
+}

packages/vuetify/src/blueprints/md2.ts

@@ -0,0 +1,62 @@
+// Icons
+import { mdi } from '@/iconsets/mdi'
+
+// Types
+import type { Blueprint } from '@/framework'
+
+export const md2: Blueprint = {
+  defaults: {
+    global: {
+      rounded: 'md',
+    },
+    VAutocomplete: {
+      variant: 'filled',
+    },
+    VBanner: {
+      color: 'primary',
+    },
+    VBtn: {
+      color: 'primary',
+    },
+    VCheckbox: {
+      color: 'secondary',
+    },
+    VCombobox: {
+      variant: 'filled',
+    },
+    VSelect: {
+      variant: 'filled',
+    },
+    VSlider: {
+      color: 'primary',
+    },
+    VTabs: {
+      color: 'primary',
+    },
+    VTextarea: {
+      variant: 'filled',
+    },
+    VTextField: {
+      variant: 'filled',
+    },
+  },
+  icons: {
+    defaultSet: 'mdi',
+    sets: {
+      mdi,
+    },
+  },
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#6200EE',
+          'primary-darken-1': '#3700B3',
+          secondary: '#03DAC6',
+          'secondary-darken-1': '#018786',
+          error: '#B00020',
+        },
+      },
+    },
+  },
+}

packages/vuetify/src/blueprints/md3.ts

@@ -0,0 +1,77 @@
+// Icons
+import { mdi } from '@/iconsets/mdi'
+
+// Types
+import type { Blueprint } from '@/framework'
+
+export const md3: Blueprint = {
+  defaults: {
+    VAppBar: {
+      flat: true,
+    },
+    VAutocomplete: {
+      variant: 'filled',
+    },
+    VBanner: {
+      color: 'primary',
+    },
+    VBtn: {
+      color: 'primary',
+      rounded: 'xl',
+    },
+    VCard: {
+      rounded: 'lg',
+    },
+    VCheckbox: {
+      color: 'secondary',
+    },
+    VChip: {
+      rounded: 'sm',
+    },
+    VCombobox: {
+      variant: 'filled',
+    },
+    VNavigationDrawer: {
+      // VList: {
+      //   nav: true,
+      //   VListItem: {
+      //     rounded: 'xl',
+      //   },
+      // },
+    },
+    VSelect: {
+      variant: 'filled',
+    },
+    VSlider: {
+      color: 'primary',
+    },
+    VTabs: {
+      color: 'primary',
+    },
+    VTextarea: {
+      variant: 'filled',
+    },
+    VTextField: {
+      variant: 'filled',
+    },
+  },
+  icons: {
+    defaultSet: 'mdi',
+    sets: {
+      mdi,
+    },
+  },
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#6750a4',
+          secondary: '#b4b0bb',
+          tertiary: '#7d5260',
+          error: '#b3261e',
+          surface: '#fffbfe',
+        },
+      },
+    },
+  },
+}

packages/vuetify/src/framework.ts

@@ -7,7 +7,7 @@ import { createTheme, ThemeSymbol } from '@/composables/theme'
 import { RtlSymbol } from '@/composables/rtl'
 
 // Utilities
-import { defineComponent, getUid, IN_BROWSER } from '@/util'
+import { defineComponent, getUid, IN_BROWSER, mergeDeep } from '@/util'
 import { reactive } from 'vue'
 
 // Types
@@ -23,6 +23,7 @@ export * from './composables'
 
 export interface VuetifyOptions {
   aliases?: Record<string, any>
+  blueprint?: Blueprint
   components?: Record<string, any>
   directives?: Record<string, any>
   defaults?: DefaultsOptions
@@ -32,8 +33,12 @@ export interface VuetifyOptions {
   locale?: (LocaleOptions & RtlOptions) | (LocaleAdapter & RtlOptions)
 }
 
-export const createVuetify = (options: VuetifyOptions = {}) => {
+export interface Blueprint extends Omit<VuetifyOptions, 'blueprint'> {}
+
+export const createVuetify = (vuetify: VuetifyOptions = {}) => {
   const install = (app: App) => {
+    const { blueprint, ...rest } = vuetify
+    const options = mergeDeep(blueprint, rest)
     const {
       aliases = {},
       components = {},