docs: avoid light grey to support dark theme in examples

fixes #21961

Author: J-Sek

packages/docs/src/examples/grid/misc-unique-layouts.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="bg-grey-lighten-5">
+  <v-container class="bg-surface-variant">
     <!-- Stack the columns on mobile by making one full-width and the other half-width -->
     <v-row>
       <v-col

packages/docs/src/examples/grid/misc-variable-content.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="bg-grey-lighten-5">
+  <v-container class="bg-surface-variant">
     <v-row
       class="mb-6"
       justify="center"

packages/docs/src/examples/text-and-typography/typography.vue

@@ -2,8 +2,8 @@
   <div>
     <v-card v-for="[name, cls] in classes" :key="name" class="my-4">
       <div :class="[cls, 'pa-2']">{{ name }}</div>
-      <div class="text-caption pa-2 bg-grey-lighten-4">
-        <div class="text-grey">Class</div>
+      <div class="text-caption pa-2 border-t">
+        <div class="opacity-70">Class</div>
         <div class="font-weight-medium">{{ cls }}</div>
       </div>
     </v-card>

packages/docs/src/examples/v-btn-toggle/prop-divided.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="d-flex align-center flex-column bg-grey-lighten-4 pa-6">
+  <div class="d-flex align-center flex-column pa-6">
     <v-btn-toggle
       v-model="toggle"
+      border
       divided
     >
       <v-btn icon="mdi-format-align-left"></v-btn>

packages/docs/src/examples/v-btn-toggle/prop-mandatory.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="d-flex flex-column align-center bg-grey-lighten-4 pa-6">
+  <div class="d-flex flex-column align-center pa-6">
     <v-btn-toggle
       v-model="toggle"
       color="primary"
+      border
       mandatory
     >
       <v-btn icon="mdi-format-align-left" value="left"></v-btn>

packages/docs/src/examples/v-btn-toggle/prop-multiple.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="d-flex flex-column align-center bg-grey-lighten-4 pa-6">
+  <div class="d-flex flex-column align-center pa-6">
     <v-btn-toggle
       v-model="toggle"
+      border
       multiple
     >
       <v-btn icon="mdi-format-align-left" value="left"></v-btn>

packages/docs/src/examples/v-btn-toggle/prop-rounded.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="d-flex justify-space-around bg-grey-lighten-4 pa-6">
+  <div class="d-flex justify-space-around pa-6">
     <v-btn-toggle
       rounded="0"
+      border
     >
       <v-btn icon="mdi-format-align-left"></v-btn>
       <v-btn icon="mdi-format-align-center"></v-btn>
@@ -11,6 +12,7 @@
 
     <v-btn-toggle
       rounded="xl"
+      border
     >
       <v-btn icon="mdi-format-align-left"></v-btn>
       <v-btn icon="mdi-format-align-center"></v-btn>

packages/docs/src/examples/v-btn-toggle/prop-variant.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center flex-column bg-grey-lighten-4 pa-6">
+  <div class="d-flex align-center flex-column pa-6">
     <div class="text-subtitle-2">Default</div>
     <v-btn-toggle
       v-model="toggle"

packages/docs/src/examples/v-fab/misc-small.vue

@@ -107,9 +107,9 @@
 
   const dialog = ref(false)
   const items = ref([
-    { icon: 'mdi-folder', iconClass: 'bg-grey-lighten-1 text-white', title: 'Photos', subtitle: 'Jan 9, 2014' },
-    { icon: 'mdi-folder', iconClass: 'bg-grey-lighten-1 text-white', title: 'Recipes', subtitle: 'Jan 17, 2014' },
-    { icon: 'mdi-folder', iconClass: 'bg-grey-lighten-1 text-white', title: 'Work', subtitle: 'Jan 28, 2014' },
+    { icon: 'mdi-folder', iconClass: 'bg-grey text-white', title: 'Photos', subtitle: 'Jan 9, 2014' },
+    { icon: 'mdi-folder', iconClass: 'bg-grey text-white', title: 'Recipes', subtitle: 'Jan 17, 2014' },
+    { icon: 'mdi-folder', iconClass: 'bg-grey text-white', title: 'Work', subtitle: 'Jan 28, 2014' },
   ])
   const items2 = ref([
     { icon: 'mdi-clipboard-text', iconClass: 'bg-blue text-white', title: 'Vacation itinerary', subtitle: 'Jan 20, 2014' },

packages/docs/src/examples/v-hotkey/prop-inline.vue

@@ -23,7 +23,7 @@
             <div class="d-flex flex-column ga-4">
               <div>
                 <h4 class="text-subtitle-1 mb-2">Standard Display (Block-level)</h4>
-                <div class="pa-3 bg-grey-lighten-5 rounded">
+                <div class="pa-3 border rounded">
                   <p class="mb-2">
                     Save your work with <v-hotkey :display-mode="displayMode" :platform="platform" keys="cmd+s"></v-hotkey>
                     or create a new file using <v-hotkey :display-mode="displayMode" :platform="platform" keys="cmd+n"></v-hotkey>.
@@ -37,7 +37,7 @@
 
               <div>
                 <h4 class="text-subtitle-1 mb-2">Inline Display (Text-integrated)</h4>
-                <div class="pa-4 bg-grey-lighten-5 rounded" style="line-height: 1.7;">
+                <div class="pa-4 border rounded" style="line-height: 1.7;">
                   <h4 class="text-h6 mb-3">Getting Started with Code Editor</h4>
 
                   <p class="mb-3">