migration 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/concepts/density.vue

@@ -74,7 +74,7 @@
         <v-toolbar
           :density="density"
           class="mb-2"
-          elevation="2"
+          elevation="1"
           title="Daily Reports"
         ></v-toolbar>
 

packages/docs/src/examples/spacing/negative-margin.vue

@@ -9,7 +9,7 @@
     <v-card
       class="mt-n12 mx-auto"
       color="secondary"
-      elevation="12"
+      elevation="4"
       height="200"
       max-width="300"
     >

packages/docs/src/examples/spacing/usage.vue

@@ -68,7 +68,7 @@
       >
         <v-sheet
           :class="[computedMargin]"
-          elevation="4"
+          elevation="2"
           rounded
         >
           <div

packages/docs/src/examples/v-alert/prop-border-color.vue

@@ -3,7 +3,7 @@
     <v-alert
       border="start"
       border-color="deep-purple accent-4"
-      elevation="2"
+      elevation="1"
     >
       Aliquam eu nunc. Fusce commodo aliquam arcu. In consectetuer turpis ut velit. Nulla facilisi..
 
@@ -15,7 +15,7 @@
     <v-alert
       border="top"
       border-color="success"
-      elevation="2"
+      elevation="1"
     >
       Vestibulum ullamcorper mauris at ligula. Nam pretium turpis et arcu. Ut varius tincidunt libero. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Morbi nec metus.
     </v-alert>
@@ -25,7 +25,7 @@
     <v-alert
       border="bottom"
       border-color="warning"
-      elevation="2"
+      elevation="1"
     >
       Sed in libero ut nibh placerat accumsan. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.
     </v-alert>
@@ -35,7 +35,7 @@
     <v-alert
       border="end"
       border-color="error"
-      elevation="2"
+      elevation="1"
     >
       Fusce commodo aliquam arcu. Pellentesque posuere. Phasellus tempus. Donec posuere vulputate arcu.
     </v-alert>

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-btn/misc-dialog-action.vue

@@ -18,7 +18,7 @@
         v-if="dialog"
         append-icon="$close"
         class="mx-auto"
-        elevation="16"
+        elevation="4"
         max-width="500"
         title="Send a receipt"
       >

packages/docs/src/examples/v-btn/prop-elevation.vue

@@ -6,27 +6,15 @@
       </v-col>
 
       <v-col cols="auto">
-        <v-btn elevation="4" size="x-large">Elevation 4</v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn elevation="8" size="x-large">Elevation 8</v-btn>
+        <v-btn elevation="3" size="x-large">Elevation 3</v-btn>
       </v-col>
 
       <v-col cols="auto">
-        <v-btn elevation="12" size="x-large">Elevation 12</v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn elevation="16" size="x-large">Elevation 16</v-btn>
-      </v-col>
-
-      <v-col cols="auto">
-        <v-btn elevation="20" size="x-large">Elevation 20</v-btn>
+        <v-btn elevation="4" size="x-large">Elevation 4</v-btn>
       </v-col>
 
       <v-col cols="auto">
-        <v-btn elevation="24" size="x-large">Elevation 24</v-btn>
+        <v-btn elevation="5" size="x-large">Elevation 5</v-btn>
       </v-col>
     </v-row>
   </v-container>

packages/docs/src/examples/v-card/prop-elevation.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card
     class="mx-auto my-8"
-    elevation="16"
+    elevation="4"
     max-width="344"
   >
     <v-card-item>

packages/docs/src/examples/v-carousel/prop-custom-icons.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card
     class="mx-auto"
-    elevation="24"
+    elevation="5"
     max-width="444"
   >
     <v-carousel