@bagelink/vue 1.9.83 → 1.9.88

package/src/components/Badge.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
 import type { IconType, ExtendedThemeType } from '@bagelink/vue'
 import { Icon } from '@bagelink/vue'
+import { computed } from 'vue'
+import '../styles/base-colors.css'
 
 interface Props {
 	color?: ExtendedThemeType
-	size?: string
 	text: string
 	icon?: IconType
 	iconEnd?: IconType
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const computedPairClass = computed(() => {
+	const theme = props.color
+	if (!theme) return 'pair-primary'
+	return `pair-${theme}`
+})
 </script>
 
 <template>
-	<div class="pill" :class="[color]">
-		<Icon v-if="icon" class="inline" :icon="icon" />
+	<div class="bgl_badge" :class="computedPairClass">
+		<Icon v-if="icon" class="inline line-height-1" size="0.5" :icon="icon" />
 		{{ text }}
-		<Icon v-if="iconEnd" class="inline" :icon="iconEnd" />
+		<Icon v-if="iconEnd" class="inline line-height-1" size="0.5" :icon="iconEnd" />
 	</div>
 </template>
 
@@ -25,1090 +32,13 @@ defineProps<Props>()
 .inline {
 	display: inline;
 }
-</style>
-
-<style>
-/* Centralized pill and badge colors CSS */
 
-.pill,
-.bgl_pill {
+.bgl_badge {
 	border-radius: 10px;
 	padding: 4px 8px;
 	font-size: 10px;
-	background: var(--bgl-gray-light);
 	white-space: nowrap;
 	display: inline;
-}
-
-/* Base Colors - Main */
-.pill.blue,
-.bgl_pill.blue {
-	background: var(--bgl-blue);
-	color: var(--bgl-white);
-}
-
-.pill.green,
-.bgl_pill.green {
-	background: var(--bgl-green);
-	color: var(--bgl-white);
-}
-
-.pill.red,
-.bgl_pill.red {
-	background: var(--bgl-red);
-	color: var(--bgl-white);
-}
-
-.pill.yellow,
-.bgl_pill.yellow {
-	background: var(--bgl-yellow);
-	color: var(--bgl-black);
-}
-
-.pill.purple,
-.bgl_pill.purple {
-	background: var(--bgl-purple);
-	color: var(--bgl-white);
-}
-
-.pill.brown,
-.bgl_pill.brown {
-	background: var(--bgl-brown);
-	color: var(--bgl-white);
-}
-
-.pill.orange,
-.bgl_pill.orange {
-	background: var(--bgl-orange);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise,
-.bgl_pill.turquoise {
-	background: var(--bgl-turquoise);
-	color: var(--bgl-white);
-}
-
-.pill.gray,
-.bgl_pill.gray {
-	background: var(--bgl-gray);
-	color: var(--bgl-white);
-}
-
-.pill.black,
-.bgl_pill.black {
-	background: var(--bgl-black);
-	color: var(--bgl-white);
-}
-
-.pill.pink,
-.bgl_pill.pink {
-	background: var(--bgl-pink);
-	color: var(--bgl-white);
-}
-
-/* System Colors */
-.pill.primary,
-.bgl_pill.primary {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-}
-
-.pill.white,
-.bgl_pill.white {
-	background: var(--bgl-white);
-	color: var(--bgl-black);
-	border: 1px solid var(--border-color);
-}
-
-/* Light Variants */
-.pill.blue-light,
-.bgl_pill.blue-light {
-	background: var(--bgl-blue-light);
-	color: var(--bgl-black);
-}
-
-.pill.green-light,
-.bgl_pill.green-light {
-	background: var(--bgl-green-light);
-	color: var(--bgl-black);
-}
-
-.pill.red-light,
-.bgl_pill.red-light {
-	background: var(--bgl-red-light);
-	color: var(--bgl-black);
-}
-
-.pill.yellow-light,
-.bgl_pill.yellow-light {
-	background: var(--bgl-yellow-light);
-	color: var(--bgl-black);
-}
-
-.pill.purple-light,
-.bgl_pill.purple-light {
-	background: var(--bgl-purple-light);
-	color: var(--bgl-black);
-}
-
-.pill.brown-light,
-.bgl_pill.brown-light {
-	background: var(--bgl-brown-light);
-	color: var(--bgl-black);
-}
-
-.pill.orange-light,
-.bgl_pill.orange-light {
-	background: var(--bgl-orange-light);
-	color: var(--bgl-black);
-}
-
-.pill.turquoise-light,
-.bgl_pill.turquoise-light {
-	background: var(--bgl-turquoise-light);
-	color: var(--bgl-black);
-}
-
-.pill.pink-light,
-.bgl_pill.pink-light {
-	background: var(--bgl-pink-light);
-	color: var(--bgl-black);
-}
-
-.pill.gray-light,
-.bgl_pill.gray-light {
-	background: var(--bgl-gray-light);
-	color: var(--bgl-black);
-}
-
-.pill.primary-light,
-.bgl_pill.primary-light {
-	background: var(--bgl-primary-light);
-	color: var(--bgl-black);
-}
-
-/* Tint Variants */
-.pill.blue-tint,
-.bgl_pill.blue-tint {
-	background: var(--bgl-blue-tint);
-	color: var(--bgl-black);
-}
-
-.pill.red-tint,
-.bgl_pill.red-tint {
-	background: var(--bgl-red-tint);
-	color: var(--bgl-black);
-}
-
-.pill.primary-tint,
-.bgl_pill.primary-tint {
-	background: var(--bgl-primary-tint);
-	color: var(--bgl-black);
-}
-
-.pill.black-tint,
-.bgl_pill.black-tint {
-	background: var(--bgl-black-tint);
-	color: var(--bgl-black);
-}
-
-/* Special Variants */
-.pill.blue-dark,
-.bgl_pill.blue-dark {
-	background: var(--bgl-blue-dark);
-	color: var(--bgl-white);
-}
-
-.pill.light,
-.bgl_pill.light {
-	background: var(--bgl-blue-light);
-	color: var(--bgl-black);
-}
-
-/* 10% variants (lightest) */
-.pill.blue-10,
-.bgl_pill.blue-10 {
-	background: var(--bgl-blue-10);
-	color: var(--bgl-black);
-}
-
-.pill.green-10,
-.bgl_pill.green-10 {
-	background: var(--bgl-green-10);
-	color: var(--bgl-black);
-}
-
-.pill.red-10,
-.bgl_pill.red-10 {
-	background: var(--bgl-red-10);
-	color: var(--bgl-black);
-}
-
-.pill.yellow-10,
-.bgl_pill.yellow-10 {
-	background: var(--bgl-yellow-10);
-	color: var(--bgl-black);
-}
-
-.pill.purple-10,
-.bgl_pill.purple-10 {
-	background: var(--bgl-purple-10);
-	color: var(--bgl-black);
-}
-
-.pill.brown-10,
-.bgl_pill.brown-10 {
-	background: var(--bgl-brown-10);
-	color: var(--bgl-black);
-}
-
-.pill.orange-10,
-.bgl_pill.orange-10 {
-	background: var(--bgl-orange-10);
-	color: var(--bgl-black);
-}
-
-.pill.turquoise-10,
-.bgl_pill.turquoise-10 {
-	background: var(--bgl-turquoise-10);
-	color: var(--bgl-black);
-}
-
-.pill.gray-10,
-.bgl_pill.gray-10 {
-	background: var(--bgl-gray-10);
-	color: var(--bgl-black);
-}
-
-.pill.black-10,
-.bgl_pill.black-10 {
-	background: var(--bgl-black-10);
-	color: var(--bgl-black);
-}
-
-.pill.pink-10,
-.bgl_pill.pink-10 {
-	background: var(--bgl-pink-10);
-	color: var(--bgl-black);
-}
-
-/* 20% variants */
-.pill.blue-20,
-.bgl_pill.blue-20 {
-	background: var(--bgl-blue-20);
-	color: var(--bgl-black);
-}
-
-.pill.green-20,
-.bgl_pill.green-20 {
-	background: var(--bgl-green-20);
-	color: var(--bgl-black);
-}
-
-.pill.red-20,
-.bgl_pill.red-20 {
-	background: var(--bgl-red-20);
-	color: var(--bgl-black);
-}
-
-.pill.yellow-20,
-.bgl_pill.yellow-20 {
-	background: var(--bgl-yellow-20);
-	color: var(--bgl-black);
-}
-
-.pill.purple-20,
-.bgl_pill.purple-20 {
-	background: var(--bgl-purple-20);
-	color: var(--bgl-black);
-}
-
-.pill.brown-20,
-.bgl_pill.brown-20 {
-	background: var(--bgl-brown-20);
-	color: var(--bgl-black);
-}
-
-.pill.orange-20,
-.bgl_pill.orange-20 {
-	background: var(--bgl-orange-20);
-	color: var(--bgl-black);
-}
-
-.pill.turquoise-20,
-.bgl_pill.turquoise-20 {
-	background: var(--bgl-turquoise-20);
-	color: var(--bgl-black);
-}
-
-.pill.gray-20,
-.bgl_pill.gray-20 {
-	background: var(--bgl-gray-20);
-	color: var(--bgl-black);
-}
-
-.pill.black-20,
-.bgl_pill.black-20 {
-	background: var(--bgl-black-20);
-	color: var(--bgl-black);
-}
-
-.pill.pink-20,
-.bgl_pill.pink-20 {
-	background: var(--bgl-pink-20);
-	color: var(--bgl-black);
-}
-
-/* 30% variants */
-.pill.blue-30,
-.bgl_pill.blue-30 {
-	background: var(--bgl-blue-30);
-	color: var(--bgl-black);
-}
-
-.pill.green-30,
-.bgl_pill.green-30 {
-	background: var(--bgl-green-30);
-	color: var(--bgl-black);
-}
-
-.pill.red-30,
-.bgl_pill.red-30 {
-	background: var(--bgl-red-30);
-	color: var(--bgl-black);
-}
-
-.pill.yellow-30,
-.bgl_pill.yellow-30 {
-	background: var(--bgl-yellow-30);
-	color: var(--bgl-black);
-}
-
-.pill.purple-30,
-.bgl_pill.purple-30 {
-	background: var(--bgl-purple-30);
-	color: var(--bgl-black);
-}
-
-.pill.brown-30,
-.bgl_pill.brown-30 {
-	background: var(--bgl-brown-30);
-	color: var(--bgl-black);
-}
-
-.pill.orange-30,
-.bgl_pill.orange-30 {
-	background: var(--bgl-orange-30);
-	color: var(--bgl-black);
-}
-
-.pill.turquoise-30,
-.bgl_pill.turquoise-30 {
-	background: var(--bgl-turquoise-30);
-	color: var(--bgl-black);
-}
-
-.pill.gray-30,
-.bgl_pill.gray-30 {
-	background: var(--bgl-gray-30);
-	color: var(--bgl-black);
-}
-
-.pill.black-30,
-.bgl_pill.black-30 {
-	background: var(--bgl-black-30);
-	color: var(--bgl-black);
-}
-
-.pill.pink-30,
-.bgl_pill.pink-30 {
-	background: var(--bgl-pink-30);
-	color: var(--bgl-black);
-}
-
-/* 40% variants */
-.pill.blue-40,
-.bgl_pill.blue-40 {
-	background: var(--bgl-blue-40);
-	color: var(--bgl-black);
-}
-
-.pill.green-40,
-.bgl_pill.green-40 {
-	background: var(--bgl-green-40);
-	color: var(--bgl-black);
-}
-
-.pill.red-40,
-.bgl_pill.red-40 {
-	background: var(--bgl-red-40);
-	color: var(--bgl-black);
-}
-
-.pill.yellow-40,
-.bgl_pill.yellow-40 {
-	background: var(--bgl-yellow-40);
-	color: var(--bgl-black);
-}
-
-.pill.purple-40,
-.bgl_pill.purple-40 {
-	background: var(--bgl-purple-40);
-	color: var(--bgl-black);
-}
-
-.pill.brown-40,
-.bgl_pill.brown-40 {
-	background: var(--bgl-brown-40);
-	color: var(--bgl-black);
-}
-
-.pill.orange-40,
-.bgl_pill.orange-40 {
-	background: var(--bgl-orange-40);
-	color: var(--bgl-black);
-}
-
-.pill.turquoise-40,
-.bgl_pill.turquoise-40 {
-	background: var(--bgl-turquoise-40);
-	color: var(--bgl-black);
-}
-
-.pill.gray-40,
-.bgl_pill.gray-40 {
-	background: var(--bgl-gray-40);
-	color: var(--bgl-black);
-}
-
-.pill.black-40,
-.bgl_pill.black-40 {
-	background: var(--bgl-black-40);
-	color: var(--bgl-black);
-}
-
-.pill.pink-40,
-.bgl_pill.pink-40 {
-	background: var(--bgl-pink-40);
-	color: var(--bgl-black);
-}
-
-/* 50% variants */
-.pill.blue-50,
-.bgl_pill.blue-50 {
-	background: var(--bgl-blue-50);
-	color: var(--bgl-black);
-}
-
-.pill.green-50,
-.bgl_pill.green-50 {
-	background: var(--bgl-green-50);
-	color: var(--bgl-black);
-}
-
-.pill.red-50,
-.bgl_pill.red-50 {
-	background: var(--bgl-red-50);
-	color: var(--bgl-black);
-}
-
-.pill.yellow-50,
-.bgl_pill.yellow-50 {
-	background: var(--bgl-yellow-50);
-	color: var(--bgl-black);
-}
-
-.pill.purple-50,
-.bgl_pill.purple-50 {
-	background: var(--bgl-purple-50);
-	color: var(--bgl-black);
-}
-
-.pill.brown-50,
-.bgl_pill.brown-50 {
-	background: var(--bgl-brown-50);
-	color: var(--bgl-black);
-}
-
-.pill.orange-50,
-.bgl_pill.orange-50 {
-	background: var(--bgl-orange-50);
-	color: var(--bgl-black);
-}
-
-.pill.turquoise-50,
-.bgl_pill.turquoise-50 {
-	background: var(--bgl-turquoise-50);
-	color: var(--bgl-black);
-}
-
-.pill.gray-50,
-.bgl_pill.gray-50 {
-	background: var(--bgl-gray-50);
-	color: var(--bgl-black);
-}
-
-.pill.black-50,
-.bgl_pill.black-50 {
-	background: var(--bgl-black-50);
-	color: var(--bgl-black);
-}
-
-.pill.pink-50,
-.bgl_pill.pink-50 {
-	background: var(--bgl-pink-50);
-	color: var(--bgl-black);
-}
-
-/* 60% variants */
-.pill.blue-60,
-.bgl_pill.blue-60 {
-	background: var(--bgl-blue-60);
-	color: var(--bgl-white);
-}
-
-.pill.green-60,
-.bgl_pill.green-60 {
-	background: var(--bgl-green-60);
-	color: var(--bgl-white);
-}
-
-.pill.red-60,
-.bgl_pill.red-60 {
-	background: var(--bgl-red-60);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-60,
-.bgl_pill.yellow-60 {
-	background: var(--bgl-yellow-60);
-	color: var(--bgl-black);
-}
-
-.pill.purple-60,
-.bgl_pill.purple-60 {
-	background: var(--bgl-purple-60);
-	color: var(--bgl-white);
-}
-
-.pill.brown-60,
-.bgl_pill.brown-60 {
-	background: var(--bgl-brown-60);
-	color: var(--bgl-white);
-}
-
-.pill.orange-60,
-.bgl_pill.orange-60 {
-	background: var(--bgl-orange-60);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-60,
-.bgl_pill.turquoise-60 {
-	background: var(--bgl-turquoise-60);
-	color: var(--bgl-black);
-}
-
-.pill.gray-60,
-.bgl_pill.gray-60 {
-	background: var(--bgl-gray-60);
-	color: var(--bgl-black);
-}
-
-.pill.black-60,
-.bgl_pill.black-60 {
-	background: var(--bgl-black-60);
-	color: var(--bgl-white);
-}
-
-.pill.pink-60,
-.bgl_pill.pink-60 {
-	background: var(--bgl-pink-60);
-	color: var(--bgl-white);
-}
-
-/* 70% variants */
-.pill.blue-70,
-.bgl_pill.blue-70 {
-	background: var(--bgl-blue-70);
-	color: var(--bgl-white);
-}
-
-.pill.green-70,
-.bgl_pill.green-70 {
-	background: var(--bgl-green-70);
-	color: var(--bgl-white);
-}
-
-.pill.red-70,
-.bgl_pill.red-70 {
-	background: var(--bgl-red-70);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-70,
-.bgl_pill.yellow-70 {
-	background: var(--bgl-yellow-70);
-	color: var(--bgl-white);
-}
-
-.pill.purple-70,
-.bgl_pill.purple-70 {
-	background: var(--bgl-purple-70);
-	color: var(--bgl-white);
-}
-
-.pill.brown-70,
-.bgl_pill.brown-70 {
-	background: var(--bgl-brown-70);
-	color: var(--bgl-white);
-}
-
-.pill.orange-70,
-.bgl_pill.orange-70 {
-	background: var(--bgl-orange-70);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-70,
-.bgl_pill.turquoise-70 {
-	background: var(--bgl-turquoise-70);
-	color: var(--bgl-black);
-}
-
-.pill.gray-70,
-.bgl_pill.gray-70 {
-	background: var(--bgl-gray-70);
-	color: var(--bgl-white);
-}
-
-.pill.black-70,
-.bgl_pill.black-70 {
-	background: var(--bgl-black-70);
-	color: var(--bgl-white);
-}
-
-.pill.pink-70,
-.bgl_pill.pink-70 {
-	background: var(--bgl-pink-70);
-	color: var(--bgl-white);
-}
-
-/* 80% variants */
-.pill.blue-80,
-.bgl_pill.blue-80 {
-	background: var(--bgl-blue-80);
-	color: var(--bgl-white);
-}
-
-.pill.green-80,
-.bgl_pill.green-80 {
-	background: var(--bgl-green-80);
-	color: var(--bgl-white);
-}
-
-.pill.red-80,
-.bgl_pill.red-80 {
-	background: var(--bgl-red-80);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-80,
-.bgl_pill.yellow-80 {
-	background: var(--bgl-yellow-80);
-	color: var(--bgl-white);
-}
-
-.pill.purple-80,
-.bgl_pill.purple-80 {
-	background: var(--bgl-purple-80);
-	color: var(--bgl-white);
-}
-
-.pill.brown-80,
-.bgl_pill.brown-80 {
-	background: var(--bgl-brown-80);
-	color: var(--bgl-white);
-}
-
-.pill.orange-80,
-.bgl_pill.orange-80 {
-	background: var(--bgl-orange-80);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-80,
-.bgl_pill.turquoise-80 {
-	background: var(--bgl-turquoise-80);
-	color: var(--bgl-black);
-}
-
-.pill.gray-80,
-.bgl_pill.gray-80 {
-	background: var(--bgl-gray-80);
-	color: var(--bgl-black);
-}
-
-.pill.black-80,
-.bgl_pill.black-80 {
-	background: var(--bgl-black-80);
-	color: var(--bgl-white);
-}
-
-.pill.pink-80,
-.bgl_pill.pink-80 {
-	background: var(--bgl-pink-80);
-	color: var(--bgl-white);
-}
-
-/* 90% variants */
-.pill.blue-90,
-.bgl_pill.blue-90 {
-	background: var(--bgl-blue-90);
-	color: var(--bgl-white);
-}
-
-.pill.green-90,
-.bgl_pill.green-90 {
-	background: var(--bgl-green-90);
-	color: var(--bgl-white);
-}
-
-.pill.red-90,
-.bgl_pill.red-90 {
-	background: var(--bgl-red-90);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-90,
-.bgl_pill.yellow-90 {
-	background: var(--bgl-yellow-90);
-	color: var(--bgl-white);
-}
-
-.pill.purple-90,
-.bgl_pill.purple-90 {
-	background: var(--bgl-purple-90);
-	color: var(--bgl-white);
-}
-
-.pill.brown-90,
-.bgl_pill.brown-90 {
-	background: var(--bgl-brown-90);
-	color: var(--bgl-white);
-}
-
-.pill.orange-90,
-.bgl_pill.orange-90 {
-	background: var(--bgl-orange-90);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-90,
-.bgl_pill.turquoise-90 {
-	background: var(--bgl-turquoise-90);
-	color: var(--bgl-white);
-}
-
-.pill.gray-90,
-.bgl_pill.gray-90 {
-	background: var(--bgl-gray-90);
-	color: var(--bgl-white);
-}
-
-.pill.black-90,
-.bgl_pill.black-90 {
-	background: var(--bgl-black-90);
-	color: var(--bgl-white);
-}
-
-.pill.pink-90,
-.bgl_pill.pink-90 {
-	background: var(--bgl-pink-90);
-	color: var(--bgl-white);
-}
-
-/* 100% variants (same as base) */
-.pill.blue-100,
-.bgl_pill.blue-100 {
-	background: var(--bgl-blue-100);
-	color: var(--bgl-white);
-}
-
-.pill.green-100,
-.bgl_pill.green-100 {
-	background: var(--bgl-green-100);
-	color: var(--bgl-white);
-}
-
-.pill.red-100,
-.bgl_pill.red-100 {
-	background: var(--bgl-red-100);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-100,
-.bgl_pill.yellow-100 {
-	background: var(--bgl-yellow-100);
-	color: var(--bgl-white);
-}
-
-.pill.purple-100,
-.bgl_pill.purple-100 {
-	background: var(--bgl-purple-100);
-	color: var(--bgl-white);
-}
-
-.pill.brown-100,
-.bgl_pill.brown-100 {
-	background: var(--bgl-brown-100);
-	color: var(--bgl-white);
-}
-
-.pill.orange-100,
-.bgl_pill.orange-100 {
-	background: var(--bgl-orange-100);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-100,
-.bgl_pill.turquoise-100 {
-	background: var(--bgl-turquoise-100);
-	color: var(--bgl-white);
-}
-
-.pill.gray-100,
-.bgl_pill.gray-100 {
-	background: var(--bgl-gray-100);
-	color: var(--bgl-white);
-}
-
-.pill.black-100,
-.bgl_pill.black-100 {
-	background: var(--bgl-black-100);
-	color: var(--bgl-white);
-}
-
-.pill.pink-100,
-.bgl_pill.pink-100 {
-	background: var(--bgl-pink-100);
-	color: var(--bgl-white);
-}
-
-/* 110% variants (darker) */
-.pill.blue-110,
-.bgl_pill.blue-110 {
-	background: var(--bgl-blue-110);
-	color: var(--bgl-white);
-}
-
-.pill.green-110,
-.bgl_pill.green-110 {
-	background: var(--bgl-green-110);
-	color: var(--bgl-white);
-}
-
-.pill.red-110,
-.bgl_pill.red-110 {
-	background: var(--bgl-red-110);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-110,
-.bgl_pill.yellow-110 {
-	background: var(--bgl-yellow-110);
-	color: var(--bgl-white);
-}
-
-.pill.purple-110,
-.bgl_pill.purple-110 {
-	background: var(--bgl-purple-110);
-	color: var(--bgl-white);
-}
-
-.pill.brown-110,
-.bgl_pill.brown-110 {
-	background: var(--bgl-brown-110);
-	color: var(--bgl-white);
-}
-
-.pill.orange-110,
-.bgl_pill.orange-110 {
-	background: var(--bgl-orange-110);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-110,
-.bgl_pill.turquoise-110 {
-	background: var(--bgl-turquoise-110);
-	color: var(--bgl-white);
-}
-
-.pill.gray-110,
-.bgl_pill.gray-110 {
-	background: var(--bgl-gray-110);
-	color: var(--bgl-white);
-}
-
-.pill.black-110,
-.bgl_pill.black-110 {
-	background: var(--bgl-black-110);
-	color: var(--bgl-white);
-}
-
-.pill.pink-110,
-.bgl_pill.pink-110 {
-	background: var(--bgl-pink-110);
-	color: var(--bgl-white);
-}
-
-/* 120% variants */
-.pill.blue-120,
-.bgl_pill.blue-120 {
-	background: var(--bgl-blue-120);
-	color: var(--bgl-white);
-}
-
-.pill.green-120,
-.bgl_pill.green-120 {
-	background: var(--bgl-green-120);
-	color: var(--bgl-white);
-}
-
-.pill.red-120,
-.bgl_pill.red-120 {
-	background: var(--bgl-red-120);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-120,
-.bgl_pill.yellow-120 {
-	background: var(--bgl-yellow-120);
-	color: var(--bgl-white);
-}
-
-.pill.purple-120,
-.bgl_pill.purple-120 {
-	background: var(--bgl-purple-120);
-	color: var(--bgl-white);
-}
-
-.pill.brown-120,
-.bgl_pill.brown-120 {
-	background: var(--bgl-brown-120);
-	color: var(--bgl-white);
-}
-
-.pill.orange-120,
-.bgl_pill.orange-120 {
-	background: var(--bgl-orange-120);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-120,
-.bgl_pill.turquoise-120 {
-	background: var(--bgl-turquoise-120);
-	color: var(--bgl-white);
-}
-
-.pill.gray-120,
-.bgl_pill.gray-120 {
-	background: var(--bgl-gray-120);
-	color: var(--bgl-white);
-}
-
-.pill.black-120,
-.bgl_pill.black-120 {
-	background: var(--bgl-black-120);
-	color: var(--bgl-white);
-}
-
-.pill.pink-120,
-.bgl_pill.pink-120 {
-	background: var(--bgl-pink-120);
-	color: var(--bgl-white);
-}
-
-/* 130% variants (darkest) */
-.pill.blue-130,
-.bgl_pill.blue-130 {
-	background: var(--bgl-blue-130);
-	color: var(--bgl-white);
-}
-
-.pill.green-130,
-.bgl_pill.green-130 {
-	background: var(--bgl-green-130);
-	color: var(--bgl-white);
-}
-
-.pill.red-130,
-.bgl_pill.red-130 {
-	background: var(--bgl-red-130);
-	color: var(--bgl-white);
-}
-
-.pill.yellow-130,
-.bgl_pill.yellow-130 {
-	background: var(--bgl-yellow-130);
-	color: var(--bgl-white);
-}
-
-.pill.purple-130,
-.bgl_pill.purple-130 {
-	background: var(--bgl-purple-130);
-	color: var(--bgl-white);
-}
-
-.pill.brown-130,
-.bgl_pill.brown-130 {
-	background: var(--bgl-brown-130);
-	color: var(--bgl-white);
-}
-
-.pill.orange-130,
-.bgl_pill.orange-130 {
-	background: var(--bgl-orange-130);
-	color: var(--bgl-white);
-}
-
-.pill.turquoise-130,
-.bgl_pill.turquoise-130 {
-	background: var(--bgl-turquoise-130);
-	color: var(--bgl-white);
-}
-
-.pill.gray-130,
-.bgl_pill.gray-130 {
-	background: var(--bgl-gray-130);
-	color: var(--bgl-white);
-}
-
-.pill.black-130,
-.bgl_pill.black-130 {
-	background: var(--bgl-black-130);
-	color: var(--bgl-white);
-}
-
-.pill.pink-130,
-.bgl_pill.pink-130 {
-	background: var(--bgl-pink-130);
-	color: var(--bgl-white);
-}
-
-/* Legacy Status Colors */
-.pill.Paid,
-.bgl_pill.Paid,
-.pill.Active,
-.bgl_pill.Active {
-	background: var(--bgl-green);
-	color: var(--bgl-white);
-}
-
-.pill.Error,
-.bgl_pill.Error {
-	background: var(--bgl-red-tint);
-	color: var(--bgl-red);
+	margin-inline-end: 0.25rem;
 }
 </style>