feat(components): reorder props for consistency and clarity

.vitepress/theme/components/ArticleMasonry.vue

@@ -69,8 +69,9 @@ onUnmounted(() => {
     <div class="masonry-column" v-for="(column, index) in masonryGroups" :key="index">
       <MaterialCard
         v-for="item in column"
-        class="feed"
+        variant="feed"
         size="m"
+        color="elevated"
         :key="item.id"
         :href="item.url"
         :title="item.title"

.vitepress/theme/components/Button.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 interface Props {
-  href?: string;
-  icon?: string;
-  text?: string;
-  color?: "elevated" | "filled" | "tonal" | "outlined" | "standard" | "text";
   shape?: "round" | "square";
   size?: "xs" | "s" | "m" | "l" | "xl";
+  color?: "elevated" | "filled" | "tonal" | "outlined" | "standard" | "text";
+  icon?: string;
+  text?: string;
+  href?: string;
   target?: "_blank" | "_self" | "_parent" | "_top";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: "filled",
   shape: "round",
   size: "s",
+  color: "filled",
   target: "_blank",
 });
 </script>

.vitepress/theme/components/Card.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
-import { ref } from "vue";
-
 interface Props {
-  category?: string[];
-  date?: string;
-  description?: string;
-  href?: string;
-  impression?: string[];
-  tags?: string[];
-  title?: string;
-  color?: "elevated" | "filled" | "outlined";
-  size?: "s" | "m" | "l";
   variant?: "feed";
+  size?: "s" | "m" | "l";
+  color?: "elevated" | "filled" | "outlined";
+  title?: string;
+  description?: string;
+  date?: string;
+  tags?: string[];
+  category?: string[];
+  impression?: string[];
+  href?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: "filled",
-  size: "m",
   variant: "feed",
+  size: "m",
+  color: "filled",
   impression: () => [],
 });
 </script>