migation across the framework

Author: J-Sek

packages/api-generator/src/locale/en/VCard.json

@@ -1,7 +1,7 @@
 {
   "props": {
     "flat": "Removes the card's elevation.",
-    "hover": "Applies **4dp** of elevation when hovered (default 2dp). You can find more information on the [elevation page](/styles/elevation).",
+    "hover": "Applies **3dp** (level 2) of elevation when hovered (default 1dp). You can find more information on the [elevation page](/styles/elevation).",
     "image": "Apply a specific background image to the component.",
     "prependIcon": "Prepends a [v-icon](/components/icons/) component to the header."
   },

packages/docs/src/examples/v-app-bar/usage.vue

@@ -28,7 +28,7 @@
     <template v-slot:configuration>
       <v-checkbox v-model="actions" label="Actions"></v-checkbox>
 
-      <v-slider v-model="elevation" label="Elevation" max="24" min="0" step="1"></v-slider>
+      <v-slider v-model="elevation" label="Elevation" max="5" min="0" step="1"></v-slider>
     </template>
   </ExamplesUsageExample>
 </template>
@@ -37,13 +37,13 @@
   const name = 'v-app-bar'
   const model = ref('default')
   const actions = ref(false)
-  const elevation = ref(2)
+  const elevation = ref(1)
   const options = ['collapse', 'rounded']
 
   const props = computed(() => {
     return {
       collapse: model.value === 'collapse' ? true : undefined,
-      elevation: elevation.value === 4 ? undefined : elevation.value,
+      elevation: elevation.value === 1 ? undefined : elevation.value,
       rounded: model.value === 'rounded' ? true : undefined,
     }
   })

packages/docs/src/examples/v-img/prop-cover.vue

@@ -4,7 +4,7 @@
       <div class="text-subtitle-2">Default</div>
       <v-img
         :aspect-ratio="1"
-        class="bg-surface elevation-10"
+        class="bg-surface elevation-3"
         src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
         width="300"
       ></v-img>
@@ -14,7 +14,7 @@
       <div class="text-subtitle-2">Cover</div>
       <v-img
         :aspect-ratio="1"
-        class="bg-surface elevation-10"
+        class="bg-surface elevation-3"
         src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"
         width="300"
         cover

packages/docs/src/examples/v-parallax/misc-welcome.vue

@@ -7,12 +7,12 @@
         <v-col cols="12" md="6">
           <h1 class="text-h1 mb-8">John Doe</h1>
           <h3 class="text-h3 mb-8 font-weight-thin">Web Developer</h3>
-          <v-btn class="elevation-4 rounded-xl mb-4" color="primary">
+          <v-btn class="elevation-2 rounded-xl mb-4" color="primary">
             Contact Me
           </v-btn>
         </v-col>
         <v-col class="text-center" cols="12" md="6">
-          <v-avatar :size="300" class="elevation-12 mx-auto mb-8">
+          <v-avatar :size="300" class="elevation-4 mx-auto mb-8">
             <v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
           </v-avatar>
         </v-col>

packages/docs/src/examples/v-pie/prop-palette.vue

@@ -32,7 +32,7 @@
             v-for="(c, ci) in palette"
             :key="ci"
             :color="c.color || c"
-            class="ma-2 elevation-2"
+            class="ma-2 elevation-1"
             rounded="lg"
             size="24"
           >

packages/docs/src/examples/v-ripple/option-center.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="text-center elevation-2 pa-12 text-h5"
+    class="text-center elevation-1 pa-12 text-h5"
     v-ripple.center
   >
     HTML element with centered ripple

packages/docs/src/examples/v-ripple/usage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="text-center elevation-2 pa-12 text-h5"
+    class="text-center elevation-1 pa-12 text-h5"
     v-ripple
   >
     HTML element with v-ripple

packages/docs/src/examples/v-sheet/usage.vue

@@ -44,7 +44,7 @@
       <v-slider
         v-model="elevation"
         label="Elevation"
-        max="24"
+        max="5"
         min="0"
       ></v-slider>
     </template>

packages/docs/src/examples/v-skeleton-loader/usage.vue

@@ -31,7 +31,7 @@
       <v-slider
         v-model="elevation"
         label="Elevation"
-        max="24"
+        max="5"
         min="0"
       ></v-slider>
     </template>

packages/docs/src/examples/v-snackbar/prop-variants.vue

@@ -26,14 +26,14 @@
 
     <v-snackbar
       :timeout="2000"
-      class="elevation-24"
+      class="elevation-5"
       color="deep-purple-accent-4"
     >
       <template v-slot:activator="{ props }">
         <v-btn class="ma-2" color="deep-purple-accent-4" v-bind="props">open</v-btn>
       </template>
 
-      Snackbar with <strong>elevation="24"</strong>.
+      Snackbar with <strong>elevation="5"</strong>.
     </v-snackbar>
 
     <v-snackbar