From 9c6df6b92735af4810de43f35cc16956f2d6d670 Mon Sep 17 00:00:00 2001
From: bryantgillespie <hey@bryantgillespie.com>
Date: Mon, 10 Jul 2023 14:38:51 -0400
Subject: [PATCH] add support for primary and gray colors for now

---
 .../src/base-badge/base-badge.story.vue       | 11 ++++++++++-
 components/src/base-badge/base-badge.vue      | 19 ++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/components/src/base-badge/base-badge.story.vue b/components/src/base-badge/base-badge.story.vue
index 574b2d6d..38739488 100644
--- a/components/src/base-badge/base-badge.story.vue
+++ b/components/src/base-badge/base-badge.story.vue
@@ -5,6 +5,7 @@ import BaseBadge from './base-badge.vue';
 const state = reactive({
 	size: 'medium',
 	label: 'Badge',
+	color: 'primary',
 	caps: false,
 	border: false,
 });
@@ -22,11 +23,19 @@ const state = reactive({
 					large: 'Large',
 				}"
 			/>
+			<HstSelect
+				v-model="state.color"
+				title="Color"
+				:options="{
+					primary: 'Primary',
+					gray: 'Gray',
+				}"
+			/>
 			<HstText v-model="state.label" title="Icon" />
 			<HstToggle v-model="state.caps" title="Caps" />
 			<HstToggle v-model="state.border" title="Border" />
 		</template>
 
-		<BaseBadge :size="state.size" :label="state.label" :caps="state.caps" :border="state.border" />
+		<BaseBadge :size="state.size" :color="state.color" :label="state.label" :caps="state.caps" :border="state.border" />
 	</Story>
 </template>
diff --git a/components/src/base-badge/base-badge.vue b/components/src/base-badge/base-badge.vue
index 6e16a2a6..e465407d 100644
--- a/components/src/base-badge/base-badge.vue
+++ b/components/src/base-badge/base-badge.vue
@@ -13,8 +13,7 @@ export interface BaseBadgeProps {
 	 * Color of the badge.
 	 * @values primary, white, danger
 	 */
-	// TODO: What colors are we allowing for badges?
-	color?: 'primary';
+	color?: 'primary' | 'gray';
 
 	/**
 	 * Whether the badge should be displayed in all caps.
@@ -83,6 +82,15 @@ const badgeClass = computed(() => {
 		props.border && 'border'
 	);
 });
+
+const borderColor = computed(() => {
+	switch (props.color) {
+		case 'primary':
+			return 'var(--purple-300)';
+		default:
+			return 'var(--gray-300)';
+	}
+});
 </script>
 
 <template>
@@ -111,6 +119,11 @@ const badgeClass = computed(() => {
 	color: var(--purple-600);
 }
 
+.badge-gray {
+	background-color: var(--gray-50);
+	color: var(--gray-600);
+}
+
 /* Sizes */
 .badge-small {
 	font-size: var(--text-xs);
@@ -129,7 +142,7 @@ const badgeClass = computed(() => {
 
 /* Props */
 .border {
-	border: 1px solid var(--purple-200);
+	border: 1px solid v-bind(borderColor);
 }
 
 .caps {