feat(ui): if a component receives conflicting props, the explicit precedence list decides which prop wins

front/src/composables/color.ts

@@ -1,5 +1,6 @@
 import type { KeysOfUnion } from "type-fest"
 import type { HTMLAttributes } from "vue"
+import { key } from "~/store"
 
 export type DefaultProps =
   | { default?: true }
@@ -57,13 +58,16 @@ const classes = {
   purple: "purple",
   green: "green",
   yellow: "yellow",
-  solid: "solid",
   outline: "outline",
   ghost: "ghost",
+  solid: "solid",
   raised: "raised",
   interactive: "interactive"
 } satisfies Record<Key, string>
 
+const getPrecedence = (searchKey:Key | string) =>
+  Object.entries(classes).findIndex(([key, _])=>key===searchKey)
+
 /**
  * @param props A superset of `{ Key? : true }`
  * @returns the number of actually applied classes (if there are no defaults)
@@ -92,7 +96,9 @@ const merge = (classes: string[]) => (attributes: HTMLAttributes = {}) =>
  */
 export const color = (props: Partial<Props>, defaults?: Key[]) =>
   merge(
-    Object.entries(props).reduce(
+    Object.entries(props)
+      .sort(([a, _], [b, __]) => getPrecedence(a) - getPrecedence(b))
+      .reduce(
       ((acc, [key, value]) =>
         value && key in classes ?
           acc.filter(accKey => !conflicts.find(set => set.has(accKey) && set.has(key as Key)))