@bagelink/vue 1.4.81 → 1.4.85

package/src/styles/btnColors.css

@@ -0,0 +1,847 @@
+/* Centralized button colors CSS */
+
+/* Base button styles - preserving existing functionality */
+.bgl_btn {
+	--btn-bg: var(--bgl-primary);
+	--btn-color: var(--bgl-light-text);
+	--btn-flat-color: var(--bgl-text-color);
+}
+
+/* Base Colors */
+.bgl_btn-blue {
+	--btn-bg: var(--bgl-blue);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green {
+	--btn-bg: var(--bgl-green);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red {
+	--btn-bg: var(--bgl-red);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow {
+	--btn-bg: var(--bgl-yellow);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple {
+	--btn-bg: var(--bgl-purple);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown {
+	--btn-bg: var(--bgl-brown);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange {
+	--btn-bg: var(--bgl-orange);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise {
+	--btn-bg: var(--bgl-turquoise);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray {
+	--btn-bg: var(--bgl-gray-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black {
+	--btn-bg: var(--bgl-black);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink {
+	--btn-bg: var(--bgl-pink);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+.bgl_btn-primary {
+	--btn-bg: var(--bgl-primary);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-primary);
+}
+
+.bgl_btn-white {
+	--btn-bg: var(--bgl-white);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-white);
+}
+
+/* Light variants */
+.bgl_btn-blue-light {
+	--btn-bg: var(--bgl-blue-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-light {
+	--btn-bg: var(--bgl-green-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-light {
+	--btn-bg: var(--bgl-red-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-light {
+	--btn-bg: var(--bgl-yellow-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-light {
+	--btn-bg: var(--bgl-purple-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-light {
+	--btn-bg: var(--bgl-brown-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-light {
+	--btn-bg: var(--bgl-orange-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-light {
+	--btn-bg: var(--bgl-turquoise-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-pink-light {
+	--btn-bg: var(--bgl-pink-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+.bgl_btn-gray-light {
+	--btn-bg: var(--bgl-gray-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-primary-light {
+	--btn-bg: var(--bgl-primary-light);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-primary);
+}
+
+.bgl_btn-light {
+	--btn-bg: var(--bgl-primary-light);
+	--btn-color: var(--bgl-primary);
+	--btn-flat-color: var(--bgl-primary-light);
+}
+
+/* Tint variants */
+.bgl_btn-blue-tint {
+	--btn-bg: var(--bgl-blue-tint);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-red-tint {
+	--btn-bg: var(--bgl-red-tint);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-primary-tint {
+	--btn-bg: var(--bgl-primary-tint);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-primary);
+}
+
+.bgl_btn-black-tint {
+	--btn-bg: var(--bgl-black-tint);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-blue-dark {
+	--btn-bg: var(--bgl-blue-dark);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-blue-dark);
+}
+
+/* 10% variants (lightest) */
+.bgl_btn-blue-10 {
+	--btn-bg: var(--bgl-blue-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-10 {
+	--btn-bg: var(--bgl-green-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-10 {
+	--btn-bg: var(--bgl-red-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-10 {
+	--btn-bg: var(--bgl-yellow-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-10 {
+	--btn-bg: var(--bgl-purple-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-10 {
+	--btn-bg: var(--bgl-brown-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-10 {
+	--btn-bg: var(--bgl-orange-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-10 {
+	--btn-bg: var(--bgl-turquoise-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-10 {
+	--btn-bg: var(--bgl-gray-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-10 {
+	--btn-bg: var(--bgl-black-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-10 {
+	--btn-bg: var(--bgl-pink-10);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* 20% variants */
+.bgl_btn-blue-20 {
+	--btn-bg: var(--bgl-blue-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-20 {
+	--btn-bg: var(--bgl-green-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-20 {
+	--btn-bg: var(--bgl-red-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-20 {
+	--btn-bg: var(--bgl-yellow-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-20 {
+	--btn-bg: var(--bgl-purple-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-20 {
+	--btn-bg: var(--bgl-brown-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-20 {
+	--btn-bg: var(--bgl-orange-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-20 {
+	--btn-bg: var(--bgl-turquoise-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-20 {
+	--btn-bg: var(--bgl-gray-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-20 {
+	--btn-bg: var(--bgl-black-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-20 {
+	--btn-bg: var(--bgl-pink-20);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* 30% variants */
+.bgl_btn-blue-30 {
+	--btn-bg: var(--bgl-blue-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-30 {
+	--btn-bg: var(--bgl-green-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-30 {
+	--btn-bg: var(--bgl-red-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-30 {
+	--btn-bg: var(--bgl-yellow-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-30 {
+	--btn-bg: var(--bgl-purple-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-30 {
+	--btn-bg: var(--bgl-brown-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-30 {
+	--btn-bg: var(--bgl-orange-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-30 {
+	--btn-bg: var(--bgl-turquoise-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-30 {
+	--btn-bg: var(--bgl-gray-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-30 {
+	--btn-bg: var(--bgl-black-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-30 {
+	--btn-bg: var(--bgl-pink-30);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* 40% variants */
+.bgl_btn-blue-40 {
+	--btn-bg: var(--bgl-blue-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-40 {
+	--btn-bg: var(--bgl-green-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-40 {
+	--btn-bg: var(--bgl-red-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-40 {
+	--btn-bg: var(--bgl-yellow-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-40 {
+	--btn-bg: var(--bgl-purple-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-40 {
+	--btn-bg: var(--bgl-brown-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-40 {
+	--btn-bg: var(--bgl-orange-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-40 {
+	--btn-bg: var(--bgl-turquoise-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-40 {
+	--btn-bg: var(--bgl-gray-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-40 {
+	--btn-bg: var(--bgl-black-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-40 {
+	--btn-bg: var(--bgl-pink-40);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* 50% variants */
+.bgl_btn-blue-50 {
+	--btn-bg: var(--bgl-blue-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-50 {
+	--btn-bg: var(--bgl-green-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-50 {
+	--btn-bg: var(--bgl-red-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-50 {
+	--btn-bg: var(--bgl-yellow-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-50 {
+	--btn-bg: var(--bgl-purple-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-50 {
+	--btn-bg: var(--bgl-brown-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-50 {
+	--btn-bg: var(--bgl-orange-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-50 {
+	--btn-bg: var(--bgl-turquoise-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-50 {
+	--btn-bg: var(--bgl-gray-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-50 {
+	--btn-bg: var(--bgl-black-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-50 {
+	--btn-bg: var(--bgl-pink-50);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* 60% variants */
+.bgl_btn-blue-60 {
+	--btn-bg: var(--bgl-blue-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-60 {
+	--btn-bg: var(--bgl-green-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-60 {
+	--btn-bg: var(--bgl-red-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-60 {
+	--btn-bg: var(--bgl-yellow-60);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-60 {
+	--btn-bg: var(--bgl-purple-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-60 {
+	--btn-bg: var(--bgl-brown-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-60 {
+	--btn-bg: var(--bgl-orange-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-60 {
+	--btn-bg: var(--bgl-turquoise-60);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-60 {
+	--btn-bg: var(--bgl-gray-60);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-60 {
+	--btn-bg: var(--bgl-black-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-60 {
+	--btn-bg: var(--bgl-pink-60);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* Continue with 70%, 80%, 90%, 100%, 110%, 120%, 130% variants following same pattern */
+/* For brevity, I'll add the darker variants that typically use white text */
+
+/* 70% variants */
+.bgl_btn-blue-70 {
+	--btn-bg: var(--bgl-blue-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-70 {
+	--btn-bg: var(--bgl-green-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-70 {
+	--btn-bg: var(--bgl-red-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-70 {
+	--btn-bg: var(--bgl-yellow-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-70 {
+	--btn-bg: var(--bgl-purple-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-70 {
+	--btn-bg: var(--bgl-brown-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-70 {
+	--btn-bg: var(--bgl-orange-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-70 {
+	--btn-bg: var(--bgl-turquoise-70);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-70 {
+	--btn-bg: var(--bgl-gray-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-70 {
+	--btn-bg: var(--bgl-black-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-70 {
+	--btn-bg: var(--bgl-pink-70);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* 80% variants */
+.bgl_btn-blue-80 {
+	--btn-bg: var(--bgl-blue-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-80 {
+	--btn-bg: var(--bgl-green-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-80 {
+	--btn-bg: var(--bgl-red-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-80 {
+	--btn-bg: var(--bgl-yellow-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-80 {
+	--btn-bg: var(--bgl-purple-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-80 {
+	--btn-bg: var(--bgl-brown-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-80 {
+	--btn-bg: var(--bgl-orange-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-80 {
+	--btn-bg: var(--bgl-turquoise-80);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-80 {
+	--btn-bg: var(--bgl-gray-80);
+	--btn-color: var(--bgl-black);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-80 {
+	--btn-bg: var(--bgl-black-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-80 {
+	--btn-bg: var(--bgl-pink-80);
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* 90%-130% variants all use white text for better contrast on darker backgrounds */
+.bgl_btn-blue-90, .bgl_btn-blue-100, .bgl_btn-blue-110, .bgl_btn-blue-120, .bgl_btn-blue-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-blue);
+}
+
+.bgl_btn-green-90, .bgl_btn-green-100, .bgl_btn-green-110, .bgl_btn-green-120, .bgl_btn-green-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-green);
+}
+
+.bgl_btn-red-90, .bgl_btn-red-100, .bgl_btn-red-110, .bgl_btn-red-120, .bgl_btn-red-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-yellow-90, .bgl_btn-yellow-100, .bgl_btn-yellow-110, .bgl_btn-yellow-120, .bgl_btn-yellow-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-yellow);
+}
+
+.bgl_btn-purple-90, .bgl_btn-purple-100, .bgl_btn-purple-110, .bgl_btn-purple-120, .bgl_btn-purple-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-purple);
+}
+
+.bgl_btn-brown-90, .bgl_btn-brown-100, .bgl_btn-brown-110, .bgl_btn-brown-120, .bgl_btn-brown-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-brown);
+}
+
+.bgl_btn-orange-90, .bgl_btn-orange-100, .bgl_btn-orange-110, .bgl_btn-orange-120, .bgl_btn-orange-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-orange);
+}
+
+.bgl_btn-turquoise-90, .bgl_btn-turquoise-100, .bgl_btn-turquoise-110, .bgl_btn-turquoise-120, .bgl_btn-turquoise-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-turquoise);
+}
+
+.bgl_btn-gray-90, .bgl_btn-gray-100, .bgl_btn-gray-110, .bgl_btn-gray-120, .bgl_btn-gray-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-black-90, .bgl_btn-black-100, .bgl_btn-black-110, .bgl_btn-black-120, .bgl_btn-black-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-pink-90, .bgl_btn-pink-100, .bgl_btn-pink-110, .bgl_btn-pink-120, .bgl_btn-pink-130 {
+	--btn-color: var(--bgl-white);
+	--btn-flat-color: var(--bgl-pink);
+}
+
+/* Individual background definitions for 90%-130% */
+.bgl_btn-blue-90 { --btn-bg: var(--bgl-blue-90); }
+.bgl_btn-green-90 { --btn-bg: var(--bgl-green-90); }
+.bgl_btn-red-90 { --btn-bg: var(--bgl-red-90); }
+.bgl_btn-yellow-90 { --btn-bg: var(--bgl-yellow-90); }
+.bgl_btn-purple-90 { --btn-bg: var(--bgl-purple-90); }
+.bgl_btn-brown-90 { --btn-bg: var(--bgl-brown-90); }
+.bgl_btn-orange-90 { --btn-bg: var(--bgl-orange-90); }
+.bgl_btn-turquoise-90 { --btn-bg: var(--bgl-turquoise-90); }
+.bgl_btn-gray-90 { --btn-bg: var(--bgl-gray-90); }
+.bgl_btn-black-90 { --btn-bg: var(--bgl-black-90); }
+.bgl_btn-pink-90 { --btn-bg: var(--bgl-pink-90); }
+
+.bgl_btn-blue-100 { --btn-bg: var(--bgl-blue-100); }
+.bgl_btn-green-100 { --btn-bg: var(--bgl-green-100); }
+.bgl_btn-red-100 { --btn-bg: var(--bgl-red-100); }
+.bgl_btn-yellow-100 { --btn-bg: var(--bgl-yellow-100); }
+.bgl_btn-purple-100 { --btn-bg: var(--bgl-purple-100); }
+.bgl_btn-brown-100 { --btn-bg: var(--bgl-brown-100); }
+.bgl_btn-orange-100 { --btn-bg: var(--bgl-orange-100); }
+.bgl_btn-turquoise-100 { --btn-bg: var(--bgl-turquoise-100); }
+.bgl_btn-gray-100 { --btn-bg: var(--bgl-gray-100); }
+.bgl_btn-black-100 { --btn-bg: var(--bgl-black-100); }
+.bgl_btn-pink-100 { --btn-bg: var(--bgl-pink-100); }
+
+.bgl_btn-blue-110 { --btn-bg: var(--bgl-blue-110); }
+.bgl_btn-green-110 { --btn-bg: var(--bgl-green-110); }
+.bgl_btn-red-110 { --btn-bg: var(--bgl-red-110); }
+.bgl_btn-yellow-110 { --btn-bg: var(--bgl-yellow-110); }
+.bgl_btn-purple-110 { --btn-bg: var(--bgl-purple-110); }
+.bgl_btn-brown-110 { --btn-bg: var(--bgl-brown-110); }
+.bgl_btn-orange-110 { --btn-bg: var(--bgl-orange-110); }
+.bgl_btn-turquoise-110 { --btn-bg: var(--bgl-turquoise-110); }
+.bgl_btn-gray-110 { --btn-bg: var(--bgl-gray-110); }
+.bgl_btn-black-110 { --btn-bg: var(--bgl-black-110); }
+.bgl_btn-pink-110 { --btn-bg: var(--bgl-pink-110); }
+
+.bgl_btn-blue-120 { --btn-bg: var(--bgl-blue-120); }
+.bgl_btn-green-120 { --btn-bg: var(--bgl-green-120); }
+.bgl_btn-red-120 { --btn-bg: var(--bgl-red-120); }
+.bgl_btn-yellow-120 { --btn-bg: var(--bgl-yellow-120); }
+.bgl_btn-purple-120 { --btn-bg: var(--bgl-purple-120); }
+.bgl_btn-brown-120 { --btn-bg: var(--bgl-brown-120); }
+.bgl_btn-orange-120 { --btn-bg: var(--bgl-orange-120); }
+.bgl_btn-turquoise-120 { --btn-bg: var(--bgl-turquoise-120); }
+.bgl_btn-gray-120 { --btn-bg: var(--bgl-gray-120); }
+.bgl_btn-black-120 { --btn-bg: var(--bgl-black-120); }
+.bgl_btn-pink-120 { --btn-bg: var(--bgl-pink-120); }
+
+.bgl_btn-blue-130 { --btn-bg: var(--bgl-blue-130); }
+.bgl_btn-green-130 { --btn-bg: var(--bgl-green-130); }
+.bgl_btn-red-130 { --btn-bg: var(--bgl-red-130); }
+.bgl_btn-yellow-130 { --btn-bg: var(--bgl-yellow-130); }
+.bgl_btn-purple-130 { --btn-bg: var(--bgl-purple-130); }
+.bgl_btn-brown-130 { --btn-bg: var(--bgl-brown-130); }
+.bgl_btn-orange-130 { --btn-bg: var(--bgl-orange-130); }
+.bgl_btn-turquoise-130 { --btn-bg: var(--bgl-turquoise-130); }
+.bgl_btn-gray-130 { --btn-bg: var(--bgl-gray-130); }
+.bgl_btn-black-130 { --btn-bg: var(--bgl-black-130); }
+.bgl_btn-pink-130 { --btn-bg: var(--bgl-pink-130); }