cleanup scss file

playground/assets/main.scss

@@ -1,4 +1,9 @@
+/* Any variables in the sass files in this folder - https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/ */
+
+// $font-family: 'Inter var', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
 @use 'vuetify' with (
   $utilities: false,
+  // $reset: false,
   $color-pack: false,
+  // $body-font-family: $font-family
 );

playground/assets/settings.scss

@@ -1,5 +1,5 @@
-/* DON'T USE @use here */
+/* Any sass variables of individual V[Component] components */
+/* used in index.vue page's style block, do not change @forward to @use */
 @forward 'vuetify/settings' with (
-  $utilities: false,
   $button-height: 40px,
 );

playground/pages/index.vue

@@ -118,5 +118,16 @@ watch(current, () => {
         <v-date-picker />
       </v-locale-provider> -->
     </div>
+    <button class="mb-2 ml-2 px-2 my-button text-white bg-primary rounded-lg">
+      Reserve
+    </button>
   </div>
 </template>
+
+<style lang="scss">
+  @use '../assets/settings';
+
+  .my-button {
+    height: settings.$button-height;
+  }
+</style>