@bagelink/vue 1.8.73 → 1.8.78

package/src/styles/base-colors.css

@@ -62,7 +62,7 @@
 .pair-white {
     background-color: var(--bgl-white);
     color: var(--bgl-black);
-    border-color: var(--bgl-white);
+    border-color: var(--bgl-black);
 }
 
 .pair-gray {
@@ -105,105 +105,99 @@
 /* Light Variants */
 .pair-blue-light {
     background-color: var(--bgl-blue-light);
-    color: var(--bgl-blue);
-    border-color: var(--bgl-blue);
+    color: var(--bgl-black);
+    border-color: var(--bgl-blue-light);
 }
 
 .pair-green-light {
     background-color: var(--bgl-green-light);
-    color: var(--bgl-green);
-    border-color: var(--bgl-green);
+    color: var(--bgl-black);
+    border-color: var(--bgl-green-light);
 }
 
 .pair-red-light {
     background-color: var(--bgl-red-light);
-    color: var(--bgl-red);
-    border-color: var(--bgl-red);
+    color: var(--bgl-black);
+    border-color: var(--bgl-red-light);
 }
 
 .pair-yellow-light {
     background-color: var(--bgl-yellow-light);
-    color: var(--bgl-yellow);
-    border-color: var(--bgl-yellow);
+    color: var(--bgl-black);
+    border-color: var(--bgl-yellow-light);
 }
 
 .pair-purple-light {
     background-color: var(--bgl-purple-light);
-    color: var(--bgl-purple);
-    border-color: var(--bgl-purple);
+    color: var(--bgl-black);
+    border-color: var(--bgl-purple-light);
 }
 
 .pair-brown-light {
     background-color: var(--bgl-brown-light);
-    color: var(--bgl-brown);
-    border-color: var(--bgl-brown);
+    color: var(--bgl-black);
+    border-color: var(--bgl-brown-light);
 }
 
 .pair-orange-light {
     background-color: var(--bgl-orange-light);
-    color: var(--bgl-orange);
-    border-color: var(--bgl-orange);
+    color: var(--bgl-black);
+    border-color: var(--bgl-orange-light);
 }
 
 .pair-turquoise-light {
     background-color: var(--bgl-turquoise-light);
-    color: var(--bgl-turquoise);
-    border-color: var(--bgl-turquoise);
+    color: var(--bgl-black);
+    border-color: var(--bgl-turquoise-light);
 }
 
 .pair-pink-light {
     background-color: var(--bgl-pink-light);
-    color: var(--bgl-pink);
-    border-color: var(--bgl-pink);
+    color: var(--bgl-black);
+    border-color: var(--bgl-pink-light);
 }
 
 .pair-gray-light {
     background-color: var(--bgl-gray-light);
     color: var(--bgl-black);
-    border-color: var(--bgl-gray);
+    border-color: var(--bgl-gray-light);
 }
 
 .pair-primary-light {
     background-color: var(--bgl-primary-light);
-    color: var(--bgl-primary);
-    border-color: var(--bgl-primary);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-light);
 }
 
 /* Tint Variants */
 .pair-blue-tint {
     background-color: var(--bgl-blue-tint);
-    color: var(--bgl-blue);
-    border-color: var(--bgl-blue);
+    color: var(--bgl-black);
+    border-color: var(--bgl-blue-tint);
 }
 
 .pair-red-tint {
     background-color: var(--bgl-red-tint);
-    color: var(--bgl-red);
-    border-color: var(--bgl-red);
+    color: var(--bgl-black);
+    border-color: var(--bgl-red-tint);
 }
 
 .pair-primary-tint {
     background-color: var(--bgl-primary-tint);
-    color: var(--bgl-primary);
-    border-color: var(--bgl-primary);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-tint);
 }
 
 .pair-black-tint {
     background-color: var(--bgl-black-tint);
     color: var(--bgl-black);
-    border-color: var(--bgl-black);
+    border-color: var(--bgl-black-tint);
 }
 
 .pair-gray-tint {
     background-color: var(--bgl-gray-tint);
-    color: var(--bgl-gray);
-    border-color: var(--bgl-gray);
-}
-
-.pair-gray-tint-dark {
-    background-color: var(--bgl-gray-tint-dark);
-    color: var(--bgl-gray);
-    border-color: var(--bgl-gray);
+    color: var(--bgl-black);
+    border-color: var(--bgl-gray-tint);
 }
 
 /* Dark Variants */
@@ -216,403 +210,625 @@
 /* 10% Variants (lightest) */
 .pair-blue-10 {
     background-color: var(--bgl-blue-10);
-    color: var(--bgl-blue);
-    border-color: var(--bgl-blue);
+    color: var(--bgl-black);
+    border-color: var(--bgl-blue-10);
 }
 
 .pair-green-10 {
     background-color: var(--bgl-green-10);
-    color: var(--bgl-green);
-    border-color: var(--bgl-green);
+    color: var(--bgl-black);
+    border-color: var(--bgl-green-10);
 }
 
 .pair-red-10 {
     background-color: var(--bgl-red-10);
-    color: var(--bgl-red);
-    border-color: var(--bgl-red);
+    color: var(--bgl-black);
+    border-color: var(--bgl-red-10);
 }
 
 .pair-yellow-10 {
     background-color: var(--bgl-yellow-10);
-    color: var(--bgl-yellow);
-    border-color: var(--bgl-yellow);
+    color: var(--bgl-black);
+    border-color: var(--bgl-yellow-10);
 }
 
 .pair-purple-10 {
     background-color: var(--bgl-purple-10);
-    color: var(--bgl-purple);
-    border-color: var(--bgl-purple);
+    color: var(--bgl-black);
+    border-color: var(--bgl-purple-10);
 }
 
 .pair-brown-10 {
     background-color: var(--bgl-brown-10);
-    color: var(--bgl-brown);
-    border-color: var(--bgl-brown);
+    color: var(--bgl-black);
+    border-color: var(--bgl-brown-10);
 }
 
 .pair-orange-10 {
     background-color: var(--bgl-orange-10);
-    color: var(--bgl-orange);
-    border-color: var(--bgl-orange);
+    color: var(--bgl-black);
+    border-color: var(--bgl-orange-10);
 }
 
 .pair-turquoise-10 {
     background-color: var(--bgl-turquoise-10);
-    color: var(--bgl-turquoise);
-    border-color: var(--bgl-turquoise);
+    color: var(--bgl-black);
+    border-color: var(--bgl-turquoise-10);
 }
 
 .pair-gray-10 {
     background-color: var(--bgl-gray-10);
     color: var(--bgl-black);
-    border-color: var(--bgl-gray);
+    border-color: var(--bgl-gray-10);
 }
 
 .pair-black-10 {
     background-color: var(--bgl-black-10);
     color: var(--bgl-black);
-    border-color: var(--bgl-black);
+    border-color: var(--bgl-black-10);
 }
 
 .pair-pink-10 {
+    background-color: var(--bgl-pink-10);
+    color: var(--bgl-black);
+    border-color: var(--bgl-pink-10);
+}
+
+/* 10% Alt Variants (colored text) */
+.pair-blue-10-alt {
+    background-color: var(--bgl-blue-10);
+    color: var(--bgl-blue);
+    border-color: var(--bgl-blue-10);
+}
+
+.pair-green-10-alt {
+    background-color: var(--bgl-green-10);
+    color: var(--bgl-green);
+    border-color: var(--bgl-green-10);
+}
+
+.pair-red-10-alt {
+    background-color: var(--bgl-red-10);
+    color: var(--bgl-red);
+    border-color: var(--bgl-red-10);
+}
+
+.pair-yellow-10-alt {
+    background-color: var(--bgl-yellow-10);
+    color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-10);
+}
+
+.pair-purple-10-alt {
+    background-color: var(--bgl-purple-10);
+    color: var(--bgl-purple);
+    border-color: var(--bgl-purple-10);
+}
+
+.pair-brown-10-alt {
+    background-color: var(--bgl-brown-10);
+    color: var(--bgl-brown);
+    border-color: var(--bgl-brown-10);
+}
+
+.pair-orange-10-alt {
+    background-color: var(--bgl-orange-10);
+    color: var(--bgl-orange);
+    border-color: var(--bgl-orange-10);
+}
+
+.pair-turquoise-10-alt {
+    background-color: var(--bgl-turquoise-10);
+    color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-10);
+}
+
+.pair-pink-10-alt {
     background-color: var(--bgl-pink-10);
     color: var(--bgl-pink);
-    border-color: var(--bgl-pink);
+    border-color: var(--bgl-pink-10);
 }
 
 /* 20% Variants */
 .pair-blue-20 {
     background-color: var(--bgl-blue-20);
-    color: var(--bgl-blue);
-    border-color: var(--bgl-blue);
+    color: var(--bgl-black);
+    border-color: var(--bgl-blue-20);
 }
 
 .pair-green-20 {
     background-color: var(--bgl-green-20);
-    color: var(--bgl-green);
-    border-color: var(--bgl-green);
+    color: var(--bgl-black);
+    border-color: var(--bgl-green-20);
 }
 
 .pair-red-20 {
     background-color: var(--bgl-red-20);
-    color: var(--bgl-red);
-    border-color: var(--bgl-red);
+    color: var(--bgl-black);
+    border-color: var(--bgl-red-20);
 }
 
 .pair-yellow-20 {
     background-color: var(--bgl-yellow-20);
-    color: var(--bgl-yellow);
-    border-color: var(--bgl-yellow);
+    color: var(--bgl-black);
+    border-color: var(--bgl-yellow-20);
 }
 
 .pair-purple-20 {
     background-color: var(--bgl-purple-20);
-    color: var(--bgl-purple);
-    border-color: var(--bgl-purple);
+    color: var(--bgl-black);
+    border-color: var(--bgl-purple-20);
 }
 
 .pair-brown-20 {
     background-color: var(--bgl-brown-20);
-    color: var(--bgl-brown);
-    border-color: var(--bgl-brown);
+    color: var(--bgl-black);
+    border-color: var(--bgl-brown-20);
 }
 
 .pair-orange-20 {
     background-color: var(--bgl-orange-20);
-    color: var(--bgl-orange);
-    border-color: var(--bgl-orange);
+    color: var(--bgl-black);
+    border-color: var(--bgl-orange-20);
 }
 
 .pair-turquoise-20 {
     background-color: var(--bgl-turquoise-20);
-    color: var(--bgl-turquoise);
-    border-color: var(--bgl-turquoise);
+    color: var(--bgl-black);
+    border-color: var(--bgl-turquoise-20);
 }
 
 .pair-gray-20 {
     background-color: var(--bgl-gray-20);
     color: var(--bgl-black);
-    border-color: var(--bgl-gray);
+    border-color: var(--bgl-gray-20);
 }
 
 .pair-black-20 {
     background-color: var(--bgl-black-20);
     color: var(--bgl-black);
-    border-color: var(--bgl-black);
+    border-color: var(--bgl-black-20);
 }
 
 .pair-pink-20 {
+    background-color: var(--bgl-pink-20);
+    color: var(--bgl-black);
+    border-color: var(--bgl-pink-20);
+}
+
+/* 20% Alt Variants (colored text) */
+.pair-blue-20-alt {
+    background-color: var(--bgl-blue-20);
+    color: var(--bgl-blue);
+    border-color: var(--bgl-blue-20);
+}
+
+.pair-green-20-alt {
+    background-color: var(--bgl-green-20);
+    color: var(--bgl-green);
+    border-color: var(--bgl-green-20);
+}
+
+.pair-red-20-alt {
+    background-color: var(--bgl-red-20);
+    color: var(--bgl-red);
+    border-color: var(--bgl-red-20);
+}
+
+.pair-yellow-20-alt {
+    background-color: var(--bgl-yellow-20);
+    color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-20);
+}
+
+.pair-purple-20-alt {
+    background-color: var(--bgl-purple-20);
+    color: var(--bgl-purple);
+    border-color: var(--bgl-purple-20);
+}
+
+.pair-brown-20-alt {
+    background-color: var(--bgl-brown-20);
+    color: var(--bgl-brown);
+    border-color: var(--bgl-brown-20);
+}
+
+.pair-orange-20-alt {
+    background-color: var(--bgl-orange-20);
+    color: var(--bgl-orange);
+    border-color: var(--bgl-orange-20);
+}
+
+.pair-turquoise-20-alt {
+    background-color: var(--bgl-turquoise-20);
+    color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-20);
+}
+
+.pair-pink-20-alt {
     background-color: var(--bgl-pink-20);
     color: var(--bgl-pink);
-    border-color: var(--bgl-pink);
+    border-color: var(--bgl-pink-20);
 }
 
 /* 30% Variants */
 .pair-blue-30 {
     background-color: var(--bgl-blue-30);
-    color: var(--bgl-blue);
-    border-color: var(--bgl-blue);
+    color: var(--bgl-black);
+    border-color: var(--bgl-blue-30);
 }
 
 .pair-green-30 {
     background-color: var(--bgl-green-30);
     color: var(--bgl-black);
-    border-color: var(--bgl-green);
+    border-color: var(--bgl-green-30);
 }
 
 .pair-red-30 {
     background-color: var(--bgl-red-30);
-    color: var(--bgl-red);
-    border-color: var(--bgl-red);
+    color: var(--bgl-black);
+    border-color: var(--bgl-red-30);
 }
 
 .pair-yellow-30 {
     background-color: var(--bgl-yellow-30);
     color: var(--bgl-black);
-    border-color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-30);
 }
 
 .pair-purple-30 {
     background-color: var(--bgl-purple-30);
-    color: var(--bgl-purple);
-    border-color: var(--bgl-purple);
+    color: var(--bgl-black);
+    border-color: var(--bgl-purple-30);
 }
 
 .pair-brown-30 {
     background-color: var(--bgl-brown-30);
     color: var(--bgl-black);
-    border-color: var(--bgl-brown);
+    border-color: var(--bgl-brown-30);
 }
 
 .pair-orange-30 {
     background-color: var(--bgl-orange-30);
-    color: var(--bgl-orange);
-    border-color: var(--bgl-orange);
+    color: var(--bgl-black);
+    border-color: var(--bgl-orange-30);
 }
 
 .pair-turquoise-30 {
     background-color: var(--bgl-turquoise-30);
     color: var(--bgl-black);
-    border-color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-30);
 }
 
 .pair-gray-30 {
     background-color: var(--bgl-gray-30);
     color: var(--bgl-black);
-    border-color: var(--bgl-gray);
+    border-color: var(--bgl-gray-30);
 }
 
 .pair-black-30 {
     background-color: var(--bgl-black-30);
     color: var(--bgl-black);
-    border-color: var(--bgl-black);
+    border-color: var(--bgl-black-30);
 }
 
 .pair-pink-30 {
+    background-color: var(--bgl-pink-30);
+    color: var(--bgl-black);
+    border-color: var(--bgl-pink-30);
+}
+
+/* 30% Alt Variants (colored text) */
+.pair-blue-30-alt {
+    background-color: var(--bgl-blue-30);
+    color: var(--bgl-blue);
+    border-color: var(--bgl-blue-30);
+}
+
+.pair-brown-30-alt {
+    background-color: var(--bgl-brown-30);
+    color: var(--bgl-brown);
+    border-color: var(--bgl-brown-30);
+}
+
+.pair-green-30-alt {
+    background-color: var(--bgl-green-30);
+    color: var(--bgl-green);
+    border-color: var(--bgl-green-30);
+}
+
+.pair-red-30-alt {
+    background-color: var(--bgl-red-30);
+    color: var(--bgl-red);
+    border-color: var(--bgl-red-30);
+}
+
+.pair-purple-30-alt {
+    background-color: var(--bgl-purple-30);
+    color: var(--bgl-purple);
+    border-color: var(--bgl-purple-30);
+}
+
+.pair-orange-30-alt {
+    background-color: var(--bgl-orange-30);
+    color: var(--bgl-orange);
+    border-color: var(--bgl-orange-30);
+}
+
+.pair-turquoise-30-alt {
+    background-color: var(--bgl-turquoise-30);
+    color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-30);
+}
+
+.pair-yellow-30-alt {
+    background-color: var(--bgl-yellow-30);
+    color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-30);
+}
+
+.pair-pink-30-alt {
     background-color: var(--bgl-pink-30);
     color: var(--bgl-pink);
-    border-color: var(--bgl-pink);
+    border-color: var(--bgl-pink-30);
 }
 
 /* 40% Variants */
 .pair-blue-40 {
     background-color: var(--bgl-blue-40);
-    color: var(--bgl-blue);
-    border-color: var(--bgl-blue);
+    color: var(--bgl-black);
+    border-color: var(--bgl-blue-40);
 }
 
 .pair-green-40 {
     background-color: var(--bgl-green-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-green);
+    border-color: var(--bgl-green-40);
 }
 
 .pair-red-40 {
     background-color: var(--bgl-red-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-red);
+    border-color: var(--bgl-red-40);
 }
 
 .pair-yellow-40 {
     background-color: var(--bgl-yellow-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-40);
 }
 
 .pair-purple-40 {
     background-color: var(--bgl-purple-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-purple);
+    border-color: var(--bgl-purple-40);
 }
 
 .pair-brown-40 {
     background-color: var(--bgl-brown-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-brown);
+    border-color: var(--bgl-brown-40);
 }
 
 .pair-orange-40 {
     background-color: var(--bgl-orange-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-orange);
+    border-color: var(--bgl-orange-40);
 }
 
 .pair-turquoise-40 {
     background-color: var(--bgl-turquoise-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-40);
 }
 
 .pair-gray-40 {
     background-color: var(--bgl-gray-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-gray);
+    border-color: var(--bgl-gray-40);
 }
 
 .pair-black-40 {
     background-color: var(--bgl-black-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-black);
+    border-color: var(--bgl-black-40);
 }
 
 .pair-pink-40 {
     background-color: var(--bgl-pink-40);
     color: var(--bgl-black);
-    border-color: var(--bgl-pink);
+    border-color: var(--bgl-pink-40);
+}
+
+/* 40% Alt Variants (colored text) */
+.pair-blue-40-alt {
+    background-color: var(--bgl-blue-40);
+    color: var(--bgl-blue);
+    border-color: var(--bgl-blue-40);
+}
+
+.pair-brown-40-alt {
+    background-color: var(--bgl-brown-40);
+    color: var(--bgl-brown);
+    border-color: var(--bgl-brown-40);
+}
+
+.pair-green-40-alt {
+    background-color: var(--bgl-green-40);
+    color: var(--bgl-green);
+    border-color: var(--bgl-green-40);
+}
+
+.pair-orange-40-alt {
+    background-color: var(--bgl-orange-40);
+    color: var(--bgl-orange);
+    border-color: var(--bgl-orange-40);
+}
+
+.pair-purple-40-alt {
+    background-color: var(--bgl-purple-40);
+    color: var(--bgl-purple);
+    border-color: var(--bgl-purple-40);
+}
+
+.pair-red-40-alt {
+    background-color: var(--bgl-red-40);
+    color: var(--bgl-red);
+    border-color: var(--bgl-red-40);
+}
+
+.pair-turquoise-40-alt {
+    background-color: var(--bgl-turquoise-40);
+    color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-40);
+}
+
+.pair-yellow-40-alt {
+    background-color: var(--bgl-yellow-40);
+    color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-40);
+}
+
+.pair-pink-40-alt {
+    background-color: var(--bgl-pink-40);
+    color: var(--bgl-pink);
+    border-color: var(--bgl-pink-40);
 }
 
 /* 50% Variants */
 .pair-blue-50 {
     background-color: var(--bgl-blue-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-blue);
+    border-color: var(--bgl-blue-50);
 }
 
 .pair-green-50 {
     background-color: var(--bgl-green-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-green);
+    border-color: var(--bgl-green-50);
 }
 
 .pair-red-50 {
     background-color: var(--bgl-red-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-red);
+    border-color: var(--bgl-red-50);
 }
 
 .pair-yellow-50 {
     background-color: var(--bgl-yellow-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-50);
 }
 
 .pair-purple-50 {
     background-color: var(--bgl-purple-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-purple);
+    border-color: var(--bgl-purple-50);
 }
 
 .pair-brown-50 {
     background-color: var(--bgl-brown-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-brown);
+    border-color: var(--bgl-brown-50);
 }
 
 .pair-orange-50 {
     background-color: var(--bgl-orange-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-orange);
+    border-color: var(--bgl-orange-50);
 }
 
 .pair-turquoise-50 {
     background-color: var(--bgl-turquoise-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-50);
 }
 
 .pair-gray-50 {
     background-color: var(--bgl-gray-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-gray);
+    border-color: var(--bgl-gray-50);
 }
 
 .pair-black-50 {
     background-color: var(--bgl-black-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-black);
+    border-color: var(--bgl-black-50);
 }
 
 .pair-pink-50 {
     background-color: var(--bgl-pink-50);
     color: var(--bgl-black);
-    border-color: var(--bgl-pink);
+    border-color: var(--bgl-pink-50);
 }
 
+/* 50% Alt Variants (colored text) - none needed as all are already black text in 50% */
+
 /* 60% Variants */
 .pair-blue-60 {
     background-color: var(--bgl-blue-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-blue);
+    border-color: var(--bgl-blue-60);
 }
 
 .pair-green-60 {
     background-color: var(--bgl-green-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-green);
+    border-color: var(--bgl-green-60);
 }
 
 .pair-red-60 {
     background-color: var(--bgl-red-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-red);
+    border-color: var(--bgl-red-60);
 }
 
 .pair-yellow-60 {
     background-color: var(--bgl-yellow-60);
     color: var(--bgl-black);
-    border-color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-60);
 }
 
 .pair-purple-60 {
     background-color: var(--bgl-purple-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-purple);
+    border-color: var(--bgl-purple-60);
 }
 
 .pair-brown-60 {
     background-color: var(--bgl-brown-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-brown);
+    border-color: var(--bgl-brown-60);
 }
 
 .pair-orange-60 {
     background-color: var(--bgl-orange-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-orange);
+    border-color: var(--bgl-orange-60);
 }
 
 .pair-turquoise-60 {
     background-color: var(--bgl-turquoise-60);
     color: var(--bgl-black);
-    border-color: var(--bgl-turquoise);
+    border-color: var(--bgl-turquoise-60);
 }
 
 .pair-gray-60 {
     background-color: var(--bgl-gray-60);
     color: var(--bgl-black);
-    border-color: var(--bgl-gray);
+    border-color: var(--bgl-gray-60);
 }
 
 .pair-black-60 {
     background-color: var(--bgl-black-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-black);
+    border-color: var(--bgl-black-60);
 }
 
 .pair-pink-60 {
     background-color: var(--bgl-pink-60);
     color: var(--bgl-white);
-    border-color: var(--bgl-pink);
+    border-color: var(--bgl-pink-60);
 }
 
 /* 70%-130% Variants (darker colors with white text) */
@@ -624,7 +840,6 @@
 .pair-blue-120,
 .pair-blue-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-blue);
 }
 
 .pair-green-70,
@@ -635,7 +850,6 @@
 .pair-green-120,
 .pair-green-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-green);
 }
 
 .pair-red-70,
@@ -646,7 +860,6 @@
 .pair-red-120,
 .pair-red-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-red);
 }
 
 .pair-yellow-70,
@@ -657,7 +870,6 @@
 .pair-yellow-120,
 .pair-yellow-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-yellow);
 }
 
 .pair-purple-70,
@@ -668,7 +880,6 @@
 .pair-purple-120,
 .pair-purple-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-purple);
 }
 
 .pair-brown-70,
@@ -679,7 +890,6 @@
 .pair-brown-120,
 .pair-brown-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-brown);
 }
 
 .pair-orange-70,
@@ -690,7 +900,6 @@
 .pair-orange-120,
 .pair-orange-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-orange);
 }
 
 .pair-turquoise-70,
@@ -701,7 +910,6 @@
 .pair-turquoise-120,
 .pair-turquoise-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-turquoise);
 }
 
 .pair-gray-70,
@@ -712,7 +920,6 @@
 .pair-gray-120,
 .pair-gray-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-gray);
 }
 
 .pair-black-70,
@@ -723,7 +930,6 @@
 .pair-black-120,
 .pair-black-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-black);
 }
 
 .pair-pink-70,
@@ -734,314 +940,674 @@
 .pair-pink-120,
 .pair-pink-130 {
     color: var(--bgl-white);
-    border-color: var(--bgl-pink);
 }
 
 /* Individual background definitions for 70%-130% */
 .pair-blue-70 {
     background-color: var(--bgl-blue-70);
+    border-color: var(--bgl-blue-70);
 }
 
 .pair-green-70 {
     background-color: var(--bgl-green-70);
+    border-color: var(--bgl-green-70);
 }
 
 .pair-red-70 {
     background-color: var(--bgl-red-70);
+    border-color: var(--bgl-red-70);
 }
 
 .pair-yellow-70 {
     background-color: var(--bgl-yellow-70);
+    border-color: var(--bgl-yellow-70);
 }
 
 .pair-purple-70 {
     background-color: var(--bgl-purple-70);
+    border-color: var(--bgl-purple-70);
 }
 
 .pair-brown-70 {
     background-color: var(--bgl-brown-70);
+    border-color: var(--bgl-brown-70);
 }
 
 .pair-orange-70 {
     background-color: var(--bgl-orange-70);
+    border-color: var(--bgl-orange-70);
 }
 
 .pair-turquoise-70 {
     background-color: var(--bgl-turquoise-70);
+    border-color: var(--bgl-turquoise-70);
 }
 
 .pair-gray-70 {
     background-color: var(--bgl-gray-70);
+    border-color: var(--bgl-gray-70);
 }
 
 .pair-black-70 {
     background-color: var(--bgl-black-70);
+    border-color: var(--bgl-black-70);
 }
 
 .pair-pink-70 {
     background-color: var(--bgl-pink-70);
+    border-color: var(--bgl-pink-70);
 }
 
 .pair-blue-80 {
     background-color: var(--bgl-blue-80);
+    border-color: var(--bgl-blue-80);
 }
 
 .pair-green-80 {
     background-color: var(--bgl-green-80);
+    border-color: var(--bgl-green-80);
 }
 
 .pair-red-80 {
     background-color: var(--bgl-red-80);
+    border-color: var(--bgl-red-80);
 }
 
 .pair-yellow-80 {
     background-color: var(--bgl-yellow-80);
+    border-color: var(--bgl-yellow-80);
 }
 
 .pair-purple-80 {
     background-color: var(--bgl-purple-80);
+    border-color: var(--bgl-purple-80);
 }
 
 .pair-brown-80 {
     background-color: var(--bgl-brown-80);
+    border-color: var(--bgl-brown-80);
 }
 
 .pair-orange-80 {
     background-color: var(--bgl-orange-80);
+    border-color: var(--bgl-orange-80);
 }
 
 .pair-turquoise-80 {
     background-color: var(--bgl-turquoise-80);
+    border-color: var(--bgl-turquoise-80);
 }
 
 .pair-gray-80 {
     background-color: var(--bgl-gray-80);
+    border-color: var(--bgl-gray-80);
 }
 
 .pair-black-80 {
     background-color: var(--bgl-black-80);
+    border-color: var(--bgl-black-80);
 }
 
 .pair-pink-80 {
     background-color: var(--bgl-pink-80);
+    border-color: var(--bgl-pink-80);
 }
 
 .pair-blue-90 {
     background-color: var(--bgl-blue-90);
+    border-color: var(--bgl-blue-90);
 }
 
 .pair-green-90 {
     background-color: var(--bgl-green-90);
+    border-color: var(--bgl-green-90);
 }
 
 .pair-red-90 {
     background-color: var(--bgl-red-90);
+    border-color: var(--bgl-red-90);
 }
 
 .pair-yellow-90 {
     background-color: var(--bgl-yellow-90);
+    border-color: var(--bgl-yellow-90);
 }
 
 .pair-purple-90 {
     background-color: var(--bgl-purple-90);
+    border-color: var(--bgl-purple-90);
 }
 
 .pair-brown-90 {
     background-color: var(--bgl-brown-90);
+    border-color: var(--bgl-brown-90);
 }
 
 .pair-orange-90 {
     background-color: var(--bgl-orange-90);
+    border-color: var(--bgl-orange-90);
 }
 
 .pair-turquoise-90 {
     background-color: var(--bgl-turquoise-90);
+    border-color: var(--bgl-turquoise-90);
 }
 
 .pair-gray-90 {
     background-color: var(--bgl-gray-90);
+    border-color: var(--bgl-gray-90);
 }
 
 .pair-black-90 {
     background-color: var(--bgl-black-90);
+    border-color: var(--bgl-black-90);
 }
 
 .pair-pink-90 {
     background-color: var(--bgl-pink-90);
+    border-color: var(--bgl-pink-90);
 }
 
 .pair-blue-100 {
     background-color: var(--bgl-blue-100);
+    border-color: var(--bgl-blue-100);
 }
 
 .pair-green-100 {
     background-color: var(--bgl-green-100);
+    border-color: var(--bgl-green-100);
 }
 
 .pair-red-100 {
     background-color: var(--bgl-red-100);
+    border-color: var(--bgl-red-100);
 }
 
 .pair-yellow-100 {
     background-color: var(--bgl-yellow-100);
+    border-color: var(--bgl-yellow-100);
 }
 
 .pair-purple-100 {
     background-color: var(--bgl-purple-100);
+    border-color: var(--bgl-purple-100);
 }
 
 .pair-brown-100 {
     background-color: var(--bgl-brown-100);
+    border-color: var(--bgl-brown-100);
 }
 
 .pair-orange-100 {
     background-color: var(--bgl-orange-100);
+    border-color: var(--bgl-orange-100);
 }
 
 .pair-turquoise-100 {
     background-color: var(--bgl-turquoise-100);
+    border-color: var(--bgl-turquoise-100);
 }
 
 .pair-gray-100 {
     background-color: var(--bgl-gray-100);
+    border-color: var(--bgl-gray-100);
 }
 
 .pair-black-100 {
     background-color: var(--bgl-black-100);
+    border-color: var(--bgl-black-100);
 }
 
 .pair-pink-100 {
     background-color: var(--bgl-pink-100);
+    border-color: var(--bgl-pink-100);
 }
 
 .pair-blue-110 {
     background-color: var(--bgl-blue-110);
+    border-color: var(--bgl-blue-110);
 }
 
 .pair-green-110 {
     background-color: var(--bgl-green-110);
+    border-color: var(--bgl-green-110);
 }
 
 .pair-red-110 {
     background-color: var(--bgl-red-110);
+    border-color: var(--bgl-red-110);
 }
 
 .pair-yellow-110 {
     background-color: var(--bgl-yellow-110);
+    border-color: var(--bgl-yellow-110);
 }
 
 .pair-purple-110 {
     background-color: var(--bgl-purple-110);
+    border-color: var(--bgl-purple-110);
 }
 
 .pair-brown-110 {
     background-color: var(--bgl-brown-110);
+    border-color: var(--bgl-brown-110);
 }
 
 .pair-orange-110 {
     background-color: var(--bgl-orange-110);
+    border-color: var(--bgl-orange-110);
 }
 
 .pair-turquoise-110 {
     background-color: var(--bgl-turquoise-110);
+    border-color: var(--bgl-turquoise-110);
 }
 
 .pair-gray-110 {
     background-color: var(--bgl-gray-110);
+    border-color: var(--bgl-gray-110);
 }
 
 .pair-black-110 {
     background-color: var(--bgl-black-110);
+    border-color: var(--bgl-black-110);
 }
 
 .pair-pink-110 {
     background-color: var(--bgl-pink-110);
+    border-color: var(--bgl-pink-110);
 }
 
 .pair-blue-120 {
     background-color: var(--bgl-blue-120);
+    border-color: var(--bgl-blue-120);
 }
 
 .pair-green-120 {
     background-color: var(--bgl-green-120);
+    border-color: var(--bgl-green-120);
 }
 
 .pair-red-120 {
     background-color: var(--bgl-red-120);
+    border-color: var(--bgl-red-120);
 }
 
 .pair-yellow-120 {
     background-color: var(--bgl-yellow-120);
+    border-color: var(--bgl-yellow-120);
 }
 
 .pair-purple-120 {
     background-color: var(--bgl-purple-120);
+    border-color: var(--bgl-purple-120);
 }
 
 .pair-brown-120 {
     background-color: var(--bgl-brown-120);
+    border-color: var(--bgl-brown-120);
 }
 
 .pair-orange-120 {
     background-color: var(--bgl-orange-120);
+    border-color: var(--bgl-orange-120);
 }
 
 .pair-turquoise-120 {
     background-color: var(--bgl-turquoise-120);
+    border-color: var(--bgl-turquoise-120);
 }
 
 .pair-gray-120 {
     background-color: var(--bgl-gray-120);
+    border-color: var(--bgl-gray-120);
 }
 
 .pair-black-120 {
     background-color: var(--bgl-black-120);
+    border-color: var(--bgl-black-120);
 }
 
 .pair-pink-120 {
     background-color: var(--bgl-pink-120);
+    border-color: var(--bgl-pink-120);
 }
 
 .pair-blue-130 {
     background-color: var(--bgl-blue-130);
+    border-color: var(--bgl-blue-130);
 }
 
 .pair-green-130 {
     background-color: var(--bgl-green-130);
+    border-color: var(--bgl-green-130);
 }
 
 .pair-red-130 {
     background-color: var(--bgl-red-130);
+    border-color: var(--bgl-red-130);
 }
 
 .pair-yellow-130 {
     background-color: var(--bgl-yellow-130);
+    border-color: var(--bgl-yellow-130);
 }
 
 .pair-purple-130 {
     background-color: var(--bgl-purple-130);
+    border-color: var(--bgl-purple-130);
 }
 
 .pair-brown-130 {
     background-color: var(--bgl-brown-130);
+    border-color: var(--bgl-brown-130);
 }
 
 .pair-orange-130 {
     background-color: var(--bgl-orange-130);
+    border-color: var(--bgl-orange-130);
 }
 
 .pair-turquoise-130 {
     background-color: var(--bgl-turquoise-130);
+    border-color: var(--bgl-turquoise-130);
 }
 
 .pair-gray-130 {
     background-color: var(--bgl-gray-130);
+    border-color: var(--bgl-gray-130);
 }
 
 .pair-black-130 {
     background-color: var(--bgl-black-130);
+    border-color: var(--bgl-black-130);
 }
 
 .pair-pink-130 {
     background-color: var(--bgl-pink-130);
+    border-color: var(--bgl-pink-130);
+}
+
+/* Alt Variants - With colored text */
+
+/* Semantic Light Variants */
+.pair-danger-light {
+    background-color: var(--bgl-red-light);
+    color: var(--bgl-black);
+    border-color: var(--bgl-red-light);
+}
+
+.pair-danger-light-alt {
+    background-color: var(--bgl-red-light);
+    color: var(--bgl-red);
+    border-color: var(--bgl-red-light);
+}
+
+.pair-success-light {
+    background-color: var(--bgl-green-light);
+    color: var(--bgl-black);
+    border-color: var(--bgl-green-light);
+}
+
+.pair-success-light-alt {
+    background-color: var(--bgl-green-light);
+    color: var(--bgl-green);
+    border-color: var(--bgl-green-light);
+}
+
+.pair-warning-light {
+    background-color: var(--bgl-yellow-light);
+    color: var(--bgl-black);
+    border-color: var(--bgl-yellow-light);
+}
+
+.pair-warning-light-alt {
+    background-color: var(--bgl-yellow-light);
+    color: var(--bgl-yellow);
+    border-color: var(--bgl-yellow-light);
+}
+
+.pair-info-light {
+    background-color: var(--bgl-blue-light);
+    color: var(--bgl-black);
+    border-color: var(--bgl-blue-light);
+}
+
+.pair-info-light-alt {
+    background-color: var(--bgl-blue-light);
+    color: var(--bgl-blue);
+    border-color: var(--bgl-blue-light);
+}
+
+.pair-primary-light-alt {
+    background-color: var(--bgl-primary-light);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-light);
+}
+
+/* Tint Variants with Colored Text */
+.pair-primary-tint-alt {
+    background-color: var(--bgl-primary-tint);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-tint);
+}
+
+/* Flat and Border modifiers - Universal approach */
+/* For all pair classes, flat mode uses border-color as text color */
+[class*="pair-"].bgl_flatPill {
+    background-color: transparent !important;
+}
+
+[class*="pair-"].bgl_pill-border {
+    background-color: transparent !important;
+    outline: 1px solid;
+}
+
+/* Base colors flat/border */
+.pair-blue.bgl_flatPill,
+.pair-blue.bgl_pill-border {
+    color: var(--bgl-blue) !important;
+}
+
+.pair-blue.bgl_pill-border {
+    outline-color: var(--bgl-blue);
+}
+
+.pair-green.bgl_flatPill,
+.pair-green.bgl_pill-border {
+    color: var(--bgl-green) !important;
+}
+
+.pair-green.bgl_pill-border {
+    outline-color: var(--bgl-green);
+}
+
+.pair-red.bgl_flatPill,
+.pair-red.bgl_pill-border {
+    color: var(--bgl-red) !important;
+}
+
+.pair-red.bgl_pill-border {
+    outline-color: var(--bgl-red);
+}
+
+.pair-yellow.bgl_flatPill,
+.pair-yellow.bgl_pill-border {
+    color: var(--bgl-yellow) !important;
+}
+
+.pair-yellow.bgl_pill-border {
+    outline-color: var(--bgl-yellow);
+}
+
+.pair-purple.bgl_flatPill,
+.pair-purple.bgl_pill-border {
+    color: var(--bgl-purple) !important;
+}
+
+.pair-purple.bgl_pill-border {
+    outline-color: var(--bgl-purple);
+}
+
+.pair-brown.bgl_flatPill,
+.pair-brown.bgl_pill-border {
+    color: var(--bgl-brown) !important;
+}
+
+.pair-brown.bgl_pill-border {
+    outline-color: var(--bgl-brown);
+}
+
+.pair-orange.bgl_flatPill,
+.pair-orange.bgl_pill-border {
+    color: var(--bgl-orange) !important;
+}
+
+.pair-orange.bgl_pill-border {
+    outline-color: var(--bgl-orange);
+}
+
+.pair-turquoise.bgl_flatPill,
+.pair-turquoise.bgl_pill-border {
+    color: var(--bgl-turquoise) !important;
+}
+
+.pair-turquoise.bgl_pill-border {
+    outline-color: var(--bgl-turquoise);
+}
+
+.pair-pink.bgl_flatPill,
+.pair-pink.bgl_pill-border {
+    color: var(--bgl-pink) !important;
+}
+
+.pair-pink.bgl_pill-border {
+    outline-color: var(--bgl-pink);
+}
+
+.pair-gray.bgl_flatPill,
+.pair-gray.bgl_pill-border {
+    color: var(--bgl-gray) !important;
+}
+
+.pair-gray.bgl_pill-border {
+    outline-color: var(--bgl-gray);
+}
+
+.pair-black.bgl_flatPill,
+.pair-black.bgl_pill-border {
+    color: var(--bgl-black) !important;
+}
+
+.pair-black.bgl_pill-border {
+    outline-color: var(--bgl-black);
+}
+
+.pair-white.bgl_flatPill,
+.pair-white.bgl_pill-border {
+    color: var(--bgl-white) !important;
+}
+
+.pair-white.bgl_pill-border {
+    outline-color: var(--bgl-white);
+}
+
+.pair-primary.bgl_flatPill,
+.pair-primary.bgl_pill-border {
+    color: var(--bgl-primary) !important;
+}
+
+.pair-primary.bgl_pill-border {
+    outline-color: var(--bgl-primary);
+}
+
+/* Semantic colors */
+.pair-danger.bgl_flatPill,
+.pair-danger.bgl_pill-border {
+    color: var(--bgl-red) !important;
+}
+
+.pair-danger.bgl_pill-border {
+    outline-color: var(--bgl-red);
+}
+
+.pair-success.bgl_flatPill,
+.pair-success.bgl_pill-border {
+    color: var(--bgl-green) !important;
+}
+
+.pair-success.bgl_pill-border {
+    outline-color: var(--bgl-green);
+}
+
+.pair-warning.bgl_flatPill,
+.pair-warning.bgl_pill-border {
+    color: var(--bgl-yellow) !important;
+}
+
+.pair-warning.bgl_pill-border {
+    outline-color: var(--bgl-yellow);
+}
+
+.pair-info.bgl_flatPill,
+.pair-info.bgl_pill-border {
+    color: var(--bgl-blue) !important;
+}
+
+.pair-info.bgl_pill-border {
+    outline-color: var(--bgl-blue);
+}
+
+/* Light variants - use the light color as border */
+[class*="-light"].bgl_flatPill {
+    color: inherit !important;
+}
+
+[class*="-light"].bgl_pill-border {
+    outline-color: inherit !important;
+    color: inherit !important;
+}
+
+/* Tint variants */
+[class*="-tint"].bgl_flatPill {
+    color: inherit !important;
+}
+
+[class*="-tint"].bgl_pill-border {
+    outline-color: inherit !important;
+    color: inherit !important;
+}
+
+/* Percentage variants - use the same color as background */
+[class*="-10"].bgl_flatPill,
+[class*="-20"].bgl_flatPill,
+[class*="-30"].bgl_flatPill,
+[class*="-40"].bgl_flatPill,
+[class*="-50"].bgl_flatPill,
+[class*="-60"].bgl_flatPill,
+[class*="-70"].bgl_flatPill,
+[class*="-80"].bgl_flatPill,
+[class*="-90"].bgl_flatPill,
+[class*="-100"].bgl_flatPill,
+[class*="-110"].bgl_flatPill,
+[class*="-120"].bgl_flatPill,
+[class*="-130"].bgl_flatPill {
+    color: inherit !important;
+}
+
+[class*="-10"].bgl_pill-border,
+[class*="-20"].bgl_pill-border,
+[class*="-30"].bgl_pill-border,
+[class*="-40"].bgl_pill-border,
+[class*="-50"].bgl_pill-border,
+[class*="-60"].bgl_pill-border,
+[class*="-70"].bgl_pill-border,
+[class*="-80"].bgl_pill-border,
+[class*="-90"].bgl_pill-border,
+[class*="-100"].bgl_pill-border,
+[class*="-110"].bgl_pill-border,
+[class*="-120"].bgl_pill-border,
+[class*="-130"].bgl_pill-border {
+    outline-color: inherit !important;
+    color: inherit !important;
 }