Refactors type definitions to improve reusability

Moves ColorVariant type definition above BootstrapVariant and updates BootstrapVariant to extend ColorVariant instead of duplicating color values.

Improves code maintainability by eliminating duplication and establishing a clear hierarchy between the two type definitions.

Author: itisAliRH

client/src/components/Common/index.ts

@@ -1,19 +1,19 @@
 import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import type { RawLocation } from "vue-router";
 
+/**
+ * Basic color variants for components that only support
+ * color-based styling like alerts, badges, and backgrounds (no outline variants).
+ */
+export type ColorVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+
 /**
  * Bootstrap Vue variants for styling components.
+ * Includes basic color variants plus outline variants for buttons and modals.
  */
 export type BootstrapVariant =
-    | "primary"
-    | "secondary"
-    | "success"
-    | "danger"
-    | "warning"
-    | "info"
-    | "light"
+    | ColorVariant
     | "link"
-    | "dark"
     | "outline-primary"
     | "outline-secondary"
     | "outline-success"
@@ -24,9 +24,6 @@ export type BootstrapVariant =
     | "outline-link"
     | "outline-dark";
 
-// TODO: Not sure if this is the best place for this type
-export type ColorVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
-
 /**
  * Represents a breadcrumb item in the BreadcrumbHeading component.
  * Each item can have a title, an optional URL to navigate to, and optional additional text