@bagelink/vue 1.4.153 → 1.4.159

package/src/styles/colors.css

@@ -1,6 +1,7 @@
 /* Base Colors */
 .bg-white {
     background: var(--bgl-white) !important;
+    --alpha-color: var(--bgl-white);
 }
 
 .color-white {
@@ -23,6 +24,7 @@
 /* Black */
 .bg-black {
     background: var(--bgl-black) !important;
+    --alpha-color: var(--bgl-black);
 }
 
 .color-black {
@@ -45,6 +47,7 @@
 /* Black Tint */
 .bg-black-tint {
     background: var(--bgl-black-tint) !important;
+    --alpha-color: var(--bgl-black-tint);
 }
 
 .color-black-tint {
@@ -67,6 +70,7 @@
 /* Primary */
 .bg-primary {
     background: var(--bgl-primary) !important;
+    --alpha-color: var(--bgl-primary);
 }
 
 .color-primary {
@@ -89,6 +93,7 @@
 /* Primary Tint */
 .bg-primary-tint {
     background: var(--bgl-primary-tint) !important;
+    --alpha-color: var(--bgl-primary-tint);
 }
 
 .color-primary-tint {
@@ -111,6 +116,7 @@
 /* Primary Light */
 .bg-primary-light {
     background: var(--bgl-primary-light) !important;
+    --alpha-color: var(--bgl-primary-light);
 }
 
 .color-primary-light {
@@ -133,6 +139,7 @@
 /* Blue */
 .bg-blue {
     background: var(--bgl-blue) !important;
+    --alpha-color: var(--bgl-blue);
 }
 
 .color-blue {
@@ -155,6 +162,7 @@
 /* Blue Tint */
 .bg-blue-tint {
     background: var(--bgl-blue-tint) !important;
+    --alpha-color: var(--bgl-blue-tint);
 }
 
 .color-blue-tint {
@@ -177,6 +185,7 @@
 /* Blue Dark */
 .bg-blue-dark {
     background: var(--bgl-blue-dark) !important;
+    --alpha-color: var(--bgl-blue-dark);
 }
 
 .color-blue-dark {
@@ -199,6 +208,7 @@
 /* Blue Light */
 .bg-blue-light {
     background: var(--bgl-blue-light) !important;
+    --alpha-color: var(--bgl-blue-light);
 }
 
 .color-blue-light {
@@ -221,6 +231,7 @@
 /* Green */
 .bg-green {
     background: var(--bgl-green) !important;
+    --alpha-color: var(--bgl-green);
 }
 
 .color-green {
@@ -243,6 +254,7 @@
 /* Green Light */
 .bg-green-light {
     background: var(--bgl-green-light) !important;
+    --alpha-color: var(--bgl-green-light);
 }
 
 .color-green-light {
@@ -265,6 +277,7 @@
 /* Red */
 .bg-red {
     background: var(--bgl-red) !important;
+    --alpha-color: var(--bgl-red);
 }
 
 .color-red {
@@ -287,6 +300,7 @@
 /* Red Tint */
 .bg-red-tint {
     background: var(--bgl-red-tint) !important;
+    --alpha-color: var(--bgl-red-tint);
 }
 
 .color-red-tint {
@@ -309,6 +323,7 @@
 /* Red Light */
 .bg-red-light {
     background: var(--bgl-red-light) !important;
+    --alpha-color: var(--bgl-red-light);
 }
 
 .color-red-light {
@@ -331,6 +346,7 @@
 /* Yellow */
 .bg-yellow {
     background: var(--bgl-yellow) !important;
+    --alpha-color: var(--bgl-yellow);
 }
 
 .color-yellow {
@@ -353,6 +369,7 @@
 /* Yellow Light */
 .bg-yellow-light {
     background: var(--bgl-yellow-light) !important;
+    --alpha-color: var(--bgl-yellow-light);
 }
 
 .color-yellow-light {
@@ -375,6 +392,7 @@
 /* Purple */
 .bg-purple {
     background: var(--bgl-purple) !important;
+    --alpha-color: var(--bgl-purple);
 }
 
 .color-purple {
@@ -397,6 +415,7 @@
 /* Purple Light */
 .bg-purple-light {
     background: var(--bgl-purple-light) !important;
+    --alpha-color: var(--bgl-purple-light);
 }
 
 .color-purple-light {
@@ -419,6 +438,7 @@
 /* Brown */
 .bg-brown {
     background: var(--bgl-brown) !important;
+    --alpha-color: var(--bgl-brown);
 }
 
 .color-brown {
@@ -441,6 +461,7 @@
 /* Brown Light */
 .bg-brown-light {
     background: var(--bgl-brown-light) !important;
+    --alpha-color: var(--bgl-brown-light);
 }
 
 .color-brown-light {
@@ -463,6 +484,7 @@
 /* Orange */
 .bg-orange {
     background: var(--bgl-orange) !important;
+    --alpha-color: var(--bgl-orange);
 }
 
 .color-orange {
@@ -485,6 +507,7 @@
 /* Orange Light */
 .bg-orange-light {
     background: var(--bgl-orange-light) !important;
+    --alpha-color: var(--bgl-orange-light);
 }
 
 .color-orange-light {
@@ -507,6 +530,7 @@
 /* Turquoise */
 .bg-turquoise {
     background: var(--bgl-turquoise) !important;
+    --alpha-color: var(--bgl-turquoise);
 }
 
 .color-turquoise {
@@ -529,6 +553,7 @@
 /* Turquoise Light */
 .bg-turquoise-light {
     background: var(--bgl-turquoise-light) !important;
+    --alpha-color: var(--bgl-turquoise-light);
 }
 
 .color-turquoise-light {
@@ -551,6 +576,7 @@
 /* Pink */
 .bg-pink {
     background: var(--bgl-pink) !important;
+    --alpha-color: var(--bgl-pink);
 }
 
 .color-pink {
@@ -573,6 +599,7 @@
 /* Pink Light */
 .bg-pink-light {
     background: var(--bgl-pink-light) !important;
+    --alpha-color: var(--bgl-pink-light);
 }
 
 .color-pink-light {
@@ -595,6 +622,7 @@
 /* Gray */
 .bg-gray {
     background: var(--bgl-gray) !important;
+    --alpha-color: var(--bgl-gray);
 }
 
 .color-gray {
@@ -617,6 +645,7 @@
 /* Gray Light */
 .bg-gray-light {
     background: var(--bgl-gray-light) !important;
+    --alpha-color: var(--bgl-gray-light);
 }
 
 .color-gray-light {
@@ -639,6 +668,7 @@
 /* Gray Tint */
 .bg-gray-tint {
     background: var(--bgl-gray-tint) !important;
+    --alpha-color: var(--bgl-gray-tint);
 }
 
 .color-gray-tint {
@@ -661,6 +691,7 @@
 /* Additional System Colors */
 .bg-bg {
     background: var(--bgl-bg) !important;
+    --alpha-color: var(--bgl-bg);
 }
 
 .color-bg {
@@ -682,6 +713,7 @@
 
 .bg-popup {
     background: var(--bgl-popup-bg) !important;
+    --alpha-color: var(--bgl-popup-bg);
 }
 
 .color-popup {
@@ -704,6 +736,7 @@
 /* Transparent and Special Colors */
 .bg-transparent {
     background: transparent !important;
+    --alpha-color: transparent;
 }
 
 .bg-input-transparent input,
@@ -722,6 +755,7 @@
 /* Color Variations - 10% */
 .bg-blue-10 {
     background: var(--bgl-blue-10) !important;
+    --alpha-color: var(--bgl-blue-10);
 }
 
 .color-blue-10 {
@@ -731,6 +765,7 @@
 .bg-input-blue-10 input,
 .bg-input-blue-10 .selectinput-btn {
     background: var(--bgl-blue-10) !important;
+    --alpha-color: var(--bgl-blue-10);
 }
 
 .border-blue-10 {
@@ -743,6 +778,7 @@
 
 .bg-green-10 {
     background: var(--bgl-green-10) !important;
+    --alpha-color: var(--bgl-green-10);
 }
 
 .color-green-10 {
@@ -752,6 +788,7 @@
 .bg-input-green-10 input,
 .bg-input-green-10 .selectinput-btn {
     background: var(--bgl-green-10) !important;
+    --alpha-color: var(--bgl-green-10);
 }
 
 .border-green-10 {
@@ -764,6 +801,7 @@
 
 .bg-red-10 {
     background: var(--bgl-red-10) !important;
+    --alpha-color: var(--bgl-red-10);
 }
 
 .color-red-10 {
@@ -773,6 +811,7 @@
 .bg-input-red-10 input,
 .bg-input-red-10 .selectinput-btn {
     background: var(--bgl-red-10) !important;
+    --alpha-color: var(--bgl-red-10);
 }
 
 .border-red-10 {
@@ -785,6 +824,7 @@
 
 .bg-yellow-10 {
     background: var(--bgl-yellow-10) !important;
+    --alpha-color: var(--bgl-yellow-10);
 }
 
 .color-yellow-10 {
@@ -794,6 +834,7 @@
 .bg-input-yellow-10 input,
 .bg-input-yellow-10 .selectinput-btn {
     background: var(--bgl-yellow-10) !important;
+    --alpha-color: var(--bgl-yellow-10);
 }
 
 .border-yellow-10 {
@@ -806,6 +847,7 @@
 
 .bg-purple-10 {
     background: var(--bgl-purple-10) !important;
+    --alpha-color: var(--bgl-purple-10);
 }
 
 .color-purple-10 {
@@ -815,6 +857,7 @@
 .bg-input-purple-10 input,
 .bg-input-purple-10 .selectinput-btn {
     background: var(--bgl-purple-10) !important;
+    --alpha-color: var(--bgl-purple-10);
 }
 
 .border-purple-10 {
@@ -827,6 +870,7 @@
 
 .bg-brown-10 {
     background: var(--bgl-brown-10) !important;
+    --alpha-color: var(--bgl-brown-10);
 }
 
 .color-brown-10 {
@@ -836,6 +880,7 @@
 .bg-input-brown-10 input,
 .bg-input-brown-10 .selectinput-btn {
     background: var(--bgl-brown-10) !important;
+    --alpha-color: var(--bgl-brown-10);
 }
 
 .border-brown-10 {
@@ -848,6 +893,7 @@
 
 .bg-orange-10 {
     background: var(--bgl-orange-10) !important;
+    --alpha-color: var(--bgl-orange-10);
 }
 
 .color-orange-10 {
@@ -857,6 +903,7 @@
 .bg-input-orange-10 input,
 .bg-input-orange-10 .selectinput-btn {
     background: var(--bgl-orange-10) !important;
+    --alpha-color: var(--bgl-orange-10);
 }
 
 .border-orange-10 {
@@ -869,6 +916,7 @@
 
 .bg-turquoise-10 {
     background: var(--bgl-turquoise-10) !important;
+    --alpha-color: var(--bgl-turquoise-10);
 }
 
 .color-turquoise-10 {
@@ -878,6 +926,7 @@
 .bg-input-turquoise-10 input,
 .bg-input-turquoise-10 .selectinput-btn {
     background: var(--bgl-turquoise-10) !important;
+    --alpha-color: var(--bgl-turquoise-10);
 }
 
 .border-turquoise-10 {
@@ -890,6 +939,7 @@
 
 .bg-gray-10 {
     background: var(--bgl-gray-10) !important;
+    --alpha-color: var(--bgl-gray-10);
 }
 
 .color-gray-10 {
@@ -899,6 +949,7 @@
 .bg-input-gray-10 input,
 .bg-input-gray-10 .selectinput-btn {
     background: var(--bgl-gray-10) !important;
+    --alpha-color: var(--bgl-gray-10);
 }
 
 .border-gray-10 {
@@ -911,6 +962,7 @@
 
 .bg-black-10 {
     background: var(--bgl-black-10) !important;
+    --alpha-color: var(--bgl-black-10);
 }
 
 .color-black-10 {
@@ -920,6 +972,7 @@
 .bg-input-black-10 input,
 .bg-input-black-10 .selectinput-btn {
     background: var(--bgl-black-10) !important;
+    --alpha-color: var(--bgl-black-10);
 }
 
 .border-black-10 {
@@ -932,6 +985,7 @@
 
 .bg-pink-10 {
     background: var(--bgl-pink-10) !important;
+    --alpha-color: var(--bgl-pink-10);
 }
 
 .color-pink-10 {
@@ -941,6 +995,7 @@
 .bg-input-pink-10 input,
 .bg-input-pink-10 .selectinput-btn {
     background: var(--bgl-pink-10) !important;
+    --alpha-color: var(--bgl-pink-10);
 }
 
 .border-pink-10 {
@@ -954,6 +1009,7 @@
 /* Color Variations - 20% */
 .bg-blue-20 {
     background: var(--bgl-blue-20) !important;
+    --alpha-color: var(--bgl-blue-20);
 }
 
 .color-blue-20 {
@@ -963,6 +1019,7 @@
 .bg-input-blue-20 input,
 .bg-input-blue-20 .selectinput-btn {
     background: var(--bgl-blue-20) !important;
+    --alpha-color: var(--bgl-blue-20);
 }
 
 .border-blue-20 {
@@ -975,6 +1032,7 @@
 
 .bg-green-20 {
     background: var(--bgl-green-20) !important;
+    --alpha-color: var(--bgl-green-20);
 }
 
 .color-green-20 {
@@ -984,6 +1042,7 @@
 .bg-input-green-20 input,
 .bg-input-green-20 .selectinput-btn {
     background: var(--bgl-green-20) !important;
+    --alpha-color: var(--bgl-green-20);
 }
 
 .border-green-20 {
@@ -996,6 +1055,7 @@
 
 .bg-red-20 {
     background: var(--bgl-red-20) !important;
+    --alpha-color: var(--bgl-red-20);
 }
 
 .color-red-20 {
@@ -1005,6 +1065,7 @@
 .bg-input-red-20 input,
 .bg-input-red-20 .selectinput-btn {
     background: var(--bgl-red-20) !important;
+    --alpha-color: var(--bgl-red-20);
 }
 
 .border-red-20 {
@@ -1017,6 +1078,7 @@
 
 .bg-yellow-20 {
     background: var(--bgl-yellow-20) !important;
+    --alpha-color: var(--bgl-yellow-20);
 }
 
 .color-yellow-20 {
@@ -1026,6 +1088,7 @@
 .bg-input-yellow-20 input,
 .bg-input-yellow-20 .selectinput-btn {
     background: var(--bgl-yellow-20) !important;
+    --alpha-color: var(--bgl-yellow-20);
 }
 
 .border-yellow-20 {
@@ -1038,6 +1101,7 @@
 
 .bg-purple-20 {
     background: var(--bgl-purple-20) !important;
+    --alpha-color: var(--bgl-purple-20);
 }
 
 .color-purple-20 {
@@ -1047,6 +1111,7 @@
 .bg-input-purple-20 input,
 .bg-input-purple-20 .selectinput-btn {
     background: var(--bgl-purple-20) !important;
+    --alpha-color: var(--bgl-purple-20);
 }
 
 .border-purple-20 {
@@ -1059,6 +1124,7 @@
 
 .bg-brown-20 {
     background: var(--bgl-brown-20) !important;
+    --alpha-color: var(--bgl-brown-20);
 }
 
 .color-brown-20 {
@@ -1068,6 +1134,7 @@
 .bg-input-brown-20 input,
 .bg-input-brown-20 .selectinput-btn {
     background: var(--bgl-brown-20) !important;
+    --alpha-color: var(--bgl-brown-20);
 }
 
 .border-brown-20 {
@@ -1080,6 +1147,7 @@
 
 .bg-orange-20 {
     background: var(--bgl-orange-20) !important;
+    --alpha-color: var(--bgl-orange-20);
 }
 
 .color-orange-20 {
@@ -1089,6 +1157,7 @@
 .bg-input-orange-20 input,
 .bg-input-orange-20 .selectinput-btn {
     background: var(--bgl-orange-20) !important;
+    --alpha-color: var(--bgl-orange-20);
 }
 
 .border-orange-20 {
@@ -1101,6 +1170,7 @@
 
 .bg-turquoise-20 {
     background: var(--bgl-turquoise-20) !important;
+    --alpha-color: var(--bgl-turquoise-20);
 }
 
 .color-turquoise-20 {
@@ -1110,6 +1180,7 @@
 .bg-input-turquoise-20 input,
 .bg-input-turquoise-20 .selectinput-btn {
     background: var(--bgl-turquoise-20) !important;
+    --alpha-color: var(--bgl-turquoise-20);
 }
 
 .border-turquoise-20 {
@@ -1122,6 +1193,7 @@
 
 .bg-gray-20 {
     background: var(--bgl-gray-20) !important;
+    --alpha-color: var(--bgl-gray-20);
 }
 
 .color-gray-20 {
@@ -1131,6 +1203,7 @@
 .bg-input-gray-20 input,
 .bg-input-gray-20 .selectinput-btn {
     background: var(--bgl-gray-20) !important;
+    --alpha-color: var(--bgl-gray-20);
 }
 
 .border-gray-20 {
@@ -1143,6 +1216,7 @@
 
 .bg-black-20 {
     background: var(--bgl-black-20) !important;
+    --alpha-color: var(--bgl-black-20);
 }
 
 .color-black-20 {
@@ -1152,6 +1226,7 @@
 .bg-input-black-20 input,
 .bg-input-black-20 .selectinput-btn {
     background: var(--bgl-black-20) !important;
+    --alpha-color: var(--bgl-black-20);
 }
 
 .border-black-20 {
@@ -1164,6 +1239,7 @@
 
 .bg-pink-20 {
     background: var(--bgl-pink-20) !important;
+    --alpha-color: var(--bgl-pink-20);
 }
 
 .color-pink-20 {
@@ -1173,6 +1249,7 @@
 .bg-input-pink-20 input,
 .bg-input-pink-20 .selectinput-btn {
     background: var(--bgl-pink-20) !important;
+    --alpha-color: var(--bgl-pink-20);
 }
 
 .border-pink-20 {
@@ -1186,6 +1263,7 @@
 /* Color Variations - 30% */
 .bg-blue-30 {
     background: var(--bgl-blue-30) !important;
+    --alpha-color: var(--bgl-blue-30);
 }
 
 .color-blue-30 {
@@ -1195,6 +1273,7 @@
 .bg-input-blue-30 input,
 .bg-input-blue-30 .selectinput-btn {
     background: var(--bgl-blue-30) !important;
+    --alpha-color: var(--bgl-blue-30);
 }
 
 .border-blue-30 {
@@ -1207,6 +1286,7 @@
 
 .bg-green-30 {
     background: var(--bgl-green-30) !important;
+    --alpha-color: var(--bgl-green-30);
 }
 
 .color-green-30 {
@@ -1216,6 +1296,7 @@
 .bg-input-green-30 input,
 .bg-input-green-30 .selectinput-btn {
     background: var(--bgl-green-30) !important;
+    --alpha-color: var(--bgl-green-30);
 }
 
 .border-green-30 {
@@ -1228,6 +1309,7 @@
 
 .bg-red-30 {
     background: var(--bgl-red-30) !important;
+    --alpha-color: var(--bgl-red-30);
 }
 
 .color-red-30 {
@@ -1237,6 +1319,7 @@
 .bg-input-red-30 input,
 .bg-input-red-30 .selectinput-btn {
     background: var(--bgl-red-30) !important;
+    --alpha-color: var(--bgl-red-30);
 }
 
 .border-red-30 {
@@ -1249,6 +1332,7 @@
 
 .bg-yellow-30 {
     background: var(--bgl-yellow-30) !important;
+    --alpha-color: var(--bgl-yellow-30);
 }
 
 .color-yellow-30 {
@@ -1258,6 +1342,7 @@
 .bg-input-yellow-30 input,
 .bg-input-yellow-30 .selectinput-btn {
     background: var(--bgl-yellow-30) !important;
+    --alpha-color: var(--bgl-yellow-30);
 }
 
 .border-yellow-30 {
@@ -1270,6 +1355,7 @@
 
 .bg-purple-30 {
     background: var(--bgl-purple-30) !important;
+    --alpha-color: var(--bgl-purple-30);
 }
 
 .color-purple-30 {
@@ -1279,6 +1365,7 @@
 .bg-input-purple-30 input,
 .bg-input-purple-30 .selectinput-btn {
     background: var(--bgl-purple-30) !important;
+    --alpha-color: var(--bgl-purple-30);
 }
 
 .border-purple-30 {
@@ -1291,6 +1378,7 @@
 
 .bg-brown-30 {
     background: var(--bgl-brown-30) !important;
+    --alpha-color: var(--bgl-brown-30);
 }
 
 .color-brown-30 {
@@ -1300,6 +1388,7 @@
 .bg-input-brown-30 input,
 .bg-input-brown-30 .selectinput-btn {
     background: var(--bgl-brown-30) !important;
+    --alpha-color: var(--bgl-brown-30);
 }
 
 .border-brown-30 {
@@ -1312,6 +1401,7 @@
 
 .bg-orange-30 {
     background: var(--bgl-orange-30) !important;
+    --alpha-color: var(--bgl-orange-30);
 }
 
 .color-orange-30 {
@@ -1321,6 +1411,7 @@
 .bg-input-orange-30 input,
 .bg-input-orange-30 .selectinput-btn {
     background: var(--bgl-orange-30) !important;
+    --alpha-color: var(--bgl-orange-30);
 }
 
 .border-orange-30 {
@@ -1333,6 +1424,7 @@
 
 .bg-turquoise-30 {
     background: var(--bgl-turquoise-30) !important;
+    --alpha-color: var(--bgl-turquoise-30);
 }
 
 .color-turquoise-30 {
@@ -1342,6 +1434,7 @@
 .bg-input-turquoise-30 input,
 .bg-input-turquoise-30 .selectinput-btn {
     background: var(--bgl-turquoise-30) !important;
+    --alpha-color: var(--bgl-turquoise-30);
 }
 
 .border-turquoise-30 {
@@ -1354,6 +1447,7 @@
 
 .bg-gray-30 {
     background: var(--bgl-gray-30) !important;
+    --alpha-color: var(--bgl-gray-30);
 }
 
 .color-gray-30 {
@@ -1363,6 +1457,7 @@
 .bg-input-gray-30 input,
 .bg-input-gray-30 .selectinput-btn {
     background: var(--bgl-gray-30) !important;
+    --alpha-color: var(--bgl-gray-30);
 }
 
 .border-gray-30 {
@@ -1375,6 +1470,7 @@
 
 .bg-black-30 {
     background: var(--bgl-black-30) !important;
+    --alpha-color: var(--bgl-black-30);
 }
 
 .color-black-30 {
@@ -1384,6 +1480,7 @@
 .bg-input-black-30 input,
 .bg-input-black-30 .selectinput-btn {
     background: var(--bgl-black-30) !important;
+    --alpha-color: var(--bgl-black-30);
 }
 
 .border-black-30 {
@@ -1396,6 +1493,7 @@
 
 .bg-pink-30 {
     background: var(--bgl-pink-30) !important;
+    --alpha-color: var(--bgl-pink-30);
 }
 
 .color-pink-30 {
@@ -1405,6 +1503,7 @@
 .bg-input-pink-30 input,
 .bg-input-pink-30 .selectinput-btn {
     background: var(--bgl-pink-30) !important;
+    --alpha-color: var(--bgl-pink-30);
 }
 
 .border-pink-30 {
@@ -1419,6 +1518,7 @@
 /* 40% */
 .bg-blue-40 {
     background: var(--bgl-blue-40) !important;
+    --alpha-color: var(--bgl-blue-40);
 }
 
 .color-blue-40 {
@@ -1428,6 +1528,7 @@
 .bg-input-blue-40 input,
 .bg-input-blue-40 .selectinput-btn {
     background: var(--bgl-blue-40) !important;
+    --alpha-color: var(--bgl-blue-40);
 }
 
 .border-blue-40 {
@@ -1440,6 +1541,7 @@
 
 .bg-green-40 {
     background: var(--bgl-green-40) !important;
+    --alpha-color: var(--bgl-green-40);
 }
 
 .color-green-40 {
@@ -1449,6 +1551,7 @@
 .bg-input-green-40 input,
 .bg-input-green-40 .selectinput-btn {
     background: var(--bgl-green-40) !important;
+    --alpha-color: var(--bgl-green-40);
 }
 
 .border-green-40 {
@@ -1461,6 +1564,7 @@
 
 .bg-red-40 {
     background: var(--bgl-red-40) !important;
+    --alpha-color: var(--bgl-red-40);
 }
 
 .color-red-40 {
@@ -1470,6 +1574,7 @@
 .bg-input-red-40 input,
 .bg-input-red-40 .selectinput-btn {
     background: var(--bgl-red-40) !important;
+    --alpha-color: var(--bgl-red-40);
 }
 
 .border-red-40 {
@@ -1482,6 +1587,7 @@
 
 .bg-yellow-40 {
     background: var(--bgl-yellow-40) !important;
+    --alpha-color: var(--bgl-yellow-40);
 }
 
 .color-yellow-40 {
@@ -1491,6 +1597,7 @@
 .bg-input-yellow-40 input,
 .bg-input-yellow-40 .selectinput-btn {
     background: var(--bgl-yellow-40) !important;
+    --alpha-color: var(--bgl-yellow-40);
 }
 
 .border-yellow-40 {
@@ -1503,6 +1610,7 @@
 
 .bg-purple-40 {
     background: var(--bgl-purple-40) !important;
+    --alpha-color: var(--bgl-purple-40);
 }
 
 .color-purple-40 {
@@ -1512,6 +1620,7 @@
 .bg-input-purple-40 input,
 .bg-input-purple-40 .selectinput-btn {
     background: var(--bgl-purple-40) !important;
+    --alpha-color: var(--bgl-purple-40);
 }
 
 .border-purple-40 {
@@ -1524,6 +1633,7 @@
 
 .bg-brown-40 {
     background: var(--bgl-brown-40) !important;
+    --alpha-color: var(--bgl-brown-40);
 }
 
 .color-brown-40 {
@@ -1533,6 +1643,7 @@
 .bg-input-brown-40 input,
 .bg-input-brown-40 .selectinput-btn {
     background: var(--bgl-brown-40) !important;
+    --alpha-color: var(--bgl-brown-40);
 }
 
 .border-brown-40 {
@@ -1545,6 +1656,7 @@
 
 .bg-orange-40 {
     background: var(--bgl-orange-40) !important;
+    --alpha-color: var(--bgl-orange-40);
 }
 
 .color-orange-40 {
@@ -1554,6 +1666,7 @@
 .bg-input-orange-40 input,
 .bg-input-orange-40 .selectinput-btn {
     background: var(--bgl-orange-40) !important;
+    --alpha-color: var(--bgl-orange-40);
 }
 
 .border-orange-40 {
@@ -1566,6 +1679,7 @@
 
 .bg-turquoise-40 {
     background: var(--bgl-turquoise-40) !important;
+    --alpha-color: var(--bgl-turquoise-40);
 }
 
 .color-turquoise-40 {
@@ -1575,6 +1689,7 @@
 .bg-input-turquoise-40 input,
 .bg-input-turquoise-40 .selectinput-btn {
     background: var(--bgl-turquoise-40) !important;
+    --alpha-color: var(--bgl-turquoise-40);
 }
 
 .border-turquoise-40 {
@@ -1587,6 +1702,7 @@
 
 .bg-gray-40 {
     background: var(--bgl-gray-40) !important;
+    --alpha-color: var(--bgl-gray-40);
 }
 
 .color-gray-40 {
@@ -1596,6 +1712,7 @@
 .bg-input-gray-40 input,
 .bg-input-gray-40 .selectinput-btn {
     background: var(--bgl-gray-40) !important;
+    --alpha-color: var(--bgl-gray-40);
 }
 
 .border-gray-40 {
@@ -1608,6 +1725,7 @@
 
 .bg-black-40 {
     background: var(--bgl-black-40) !important;
+    --alpha-color: var(--bgl-black-40);
 }
 
 .color-black-40 {
@@ -1617,6 +1735,7 @@
 .bg-input-black-40 input,
 .bg-input-black-40 .selectinput-btn {
     background: var(--bgl-black-40) !important;
+    --alpha-color: var(--bgl-black-40);
 }
 
 .border-black-40 {
@@ -1629,6 +1748,7 @@
 
 .bg-pink-40 {
     background: var(--bgl-pink-40) !important;
+    --alpha-color: var(--bgl-pink-40);
 }
 
 .color-pink-40 {
@@ -1638,6 +1758,7 @@
 .bg-input-pink-40 input,
 .bg-input-pink-40 .selectinput-btn {
     background: var(--bgl-pink-40) !important;
+    --alpha-color: var(--bgl-pink-40);
 }
 
 .border-pink-40 {
@@ -1648,9 +1769,10 @@
     color: var(--bgl-pink-40) !important;
 }
 
-/* 50% */
+/* Color Variations - 50% */
 .bg-blue-50 {
     background: var(--bgl-blue-50) !important;
+    --alpha-color: var(--bgl-blue-50);
 }
 
 .color-blue-50 {
@@ -1660,6 +1782,7 @@
 .bg-input-blue-50 input,
 .bg-input-blue-50 .selectinput-btn {
     background: var(--bgl-blue-50) !important;
+    --alpha-color: var(--bgl-blue-50);
 }
 
 .border-blue-50 {
@@ -1672,6 +1795,7 @@
 
 .bg-green-50 {
     background: var(--bgl-green-50) !important;
+    --alpha-color: var(--bgl-green-50);
 }
 
 .color-green-50 {
@@ -1681,6 +1805,7 @@
 .bg-input-green-50 input,
 .bg-input-green-50 .selectinput-btn {
     background: var(--bgl-green-50) !important;
+    --alpha-color: var(--bgl-green-50);
 }
 
 .border-green-50 {
@@ -1693,6 +1818,7 @@
 
 .bg-red-50 {
     background: var(--bgl-red-50) !important;
+    --alpha-color: var(--bgl-red-50);
 }
 
 .color-red-50 {
@@ -1702,6 +1828,7 @@
 .bg-input-red-50 input,
 .bg-input-red-50 .selectinput-btn {
     background: var(--bgl-red-50) !important;
+    --alpha-color: var(--bgl-red-50);
 }
 
 .border-red-50 {
@@ -1714,6 +1841,7 @@
 
 .bg-yellow-50 {
     background: var(--bgl-yellow-50) !important;
+    --alpha-color: var(--bgl-yellow-50);
 }
 
 .color-yellow-50 {
@@ -1723,6 +1851,7 @@
 .bg-input-yellow-50 input,
 .bg-input-yellow-50 .selectinput-btn {
     background: var(--bgl-yellow-50) !important;
+    --alpha-color: var(--bgl-yellow-50);
 }
 
 .border-yellow-50 {
@@ -1735,6 +1864,7 @@
 
 .bg-purple-50 {
     background: var(--bgl-purple-50) !important;
+    --alpha-color: var(--bgl-purple-50);
 }
 
 .color-purple-50 {
@@ -1744,6 +1874,7 @@
 .bg-input-purple-50 input,
 .bg-input-purple-50 .selectinput-btn {
     background: var(--bgl-purple-50) !important;
+    --alpha-color: var(--bgl-purple-50);
 }
 
 .border-purple-50 {
@@ -1756,6 +1887,7 @@
 
 .bg-brown-50 {
     background: var(--bgl-brown-50) !important;
+    --alpha-color: var(--bgl-brown-50);
 }
 
 .color-brown-50 {
@@ -1765,6 +1897,7 @@
 .bg-input-brown-50 input,
 .bg-input-brown-50 .selectinput-btn {
     background: var(--bgl-brown-50) !important;
+    --alpha-color: var(--bgl-brown-50);
 }
 
 .border-brown-50 {
@@ -1777,6 +1910,7 @@
 
 .bg-orange-50 {
     background: var(--bgl-orange-50) !important;
+    --alpha-color: var(--bgl-orange-50);
 }
 
 .color-orange-50 {
@@ -1786,6 +1920,7 @@
 .bg-input-orange-50 input,
 .bg-input-orange-50 .selectinput-btn {
     background: var(--bgl-orange-50) !important;
+    --alpha-color: var(--bgl-orange-50);
 }
 
 .border-orange-50 {
@@ -1798,6 +1933,7 @@
 
 .bg-turquoise-50 {
     background: var(--bgl-turquoise-50) !important;
+    --alpha-color: var(--bgl-turquoise-50);
 }
 
 .color-turquoise-50 {
@@ -1807,6 +1943,7 @@
 .bg-input-turquoise-50 input,
 .bg-input-turquoise-50 .selectinput-btn {
     background: var(--bgl-turquoise-50) !important;
+    --alpha-color: var(--bgl-turquoise-50);
 }
 
 .border-turquoise-50 {
@@ -1819,6 +1956,7 @@
 
 .bg-gray-50 {
     background: var(--bgl-gray-50) !important;
+    --alpha-color: var(--bgl-gray-50);
 }
 
 .color-gray-50 {
@@ -1828,6 +1966,7 @@
 .bg-input-gray-50 input,
 .bg-input-gray-50 .selectinput-btn {
     background: var(--bgl-gray-50) !important;
+    --alpha-color: var(--bgl-gray-50);
 }
 
 .border-gray-50 {
@@ -1840,6 +1979,7 @@
 
 .bg-black-50 {
     background: var(--bgl-black-50) !important;
+    --alpha-color: var(--bgl-black-50);
 }
 
 .color-black-50 {
@@ -1849,6 +1989,7 @@
 .bg-input-black-50 input,
 .bg-input-black-50 .selectinput-btn {
     background: var(--bgl-black-50) !important;
+    --alpha-color: var(--bgl-black-50);
 }
 
 .border-black-50 {
@@ -1861,6 +2002,7 @@
 
 .bg-pink-50 {
     background: var(--bgl-pink-50) !important;
+    --alpha-color: var(--bgl-pink-50);
 }
 
 .color-pink-50 {
@@ -1870,6 +2012,7 @@
 .bg-input-pink-50 input,
 .bg-input-pink-50 .selectinput-btn {
     background: var(--bgl-pink-50) !important;
+    --alpha-color: var(--bgl-pink-50);
 }
 
 .border-pink-50 {
@@ -1884,6 +2027,7 @@
 /* 60% */
 .bg-blue-60 {
     background: var(--bgl-blue-60) !important;
+    --alpha-color: var(--bgl-blue-60);
 }
 
 .color-blue-60 {
@@ -1893,6 +2037,7 @@
 .bg-input-blue-60 input,
 .bg-input-blue-60 .selectinput-btn {
     background: var(--bgl-blue-60) !important;
+    --alpha-color: var(--bgl-blue-60);
 }
 
 .border-blue-60 {
@@ -1905,6 +2050,7 @@
 
 .bg-green-60 {
     background: var(--bgl-green-60) !important;
+    --alpha-color: var(--bgl-green-60);
 }
 
 .color-green-60 {
@@ -1914,6 +2060,7 @@
 .bg-input-green-60 input,
 .bg-input-green-60 .selectinput-btn {
     background: var(--bgl-green-60) !important;
+    --alpha-color: var(--bgl-green-60);
 }
 
 .border-green-60 {
@@ -1926,6 +2073,7 @@
 
 .bg-red-60 {
     background: var(--bgl-red-60) !important;
+    --alpha-color: var(--bgl-red-60);
 }
 
 .color-red-60 {
@@ -1935,6 +2083,7 @@
 .bg-input-red-60 input,
 .bg-input-red-60 .selectinput-btn {
     background: var(--bgl-red-60) !important;
+    --alpha-color: var(--bgl-red-60);
 }
 
 .border-red-60 {
@@ -1947,6 +2096,7 @@
 
 .bg-yellow-60 {
     background: var(--bgl-yellow-60) !important;
+    --alpha-color: var(--bgl-yellow-60);
 }
 
 .color-yellow-60 {
@@ -1956,6 +2106,7 @@
 .bg-input-yellow-60 input,
 .bg-input-yellow-60 .selectinput-btn {
     background: var(--bgl-yellow-60) !important;
+    --alpha-color: var(--bgl-yellow-60);
 }
 
 .border-yellow-60 {
@@ -1968,6 +2119,7 @@
 
 .bg-purple-60 {
     background: var(--bgl-purple-60) !important;
+    --alpha-color: var(--bgl-purple-60);
 }
 
 .color-purple-60 {
@@ -1977,6 +2129,7 @@
 .bg-input-purple-60 input,
 .bg-input-purple-60 .selectinput-btn {
     background: var(--bgl-purple-60) !important;
+    --alpha-color: var(--bgl-purple-60);
 }
 
 .border-purple-60 {
@@ -1989,6 +2142,7 @@
 
 .bg-brown-60 {
     background: var(--bgl-brown-60) !important;
+    --alpha-color: var(--bgl-brown-60);
 }
 
 .color-brown-60 {
@@ -1998,6 +2152,7 @@
 .bg-input-brown-60 input,
 .bg-input-brown-60 .selectinput-btn {
     background: var(--bgl-brown-60) !important;
+    --alpha-color: var(--bgl-brown-60);
 }
 
 .border-brown-60 {
@@ -2010,6 +2165,7 @@
 
 .bg-orange-60 {
     background: var(--bgl-orange-60) !important;
+    --alpha-color: var(--bgl-orange-60);
 }
 
 .color-orange-60 {
@@ -2019,6 +2175,7 @@
 .bg-input-orange-60 input,
 .bg-input-orange-60 .selectinput-btn {
     background: var(--bgl-orange-60) !important;
+    --alpha-color: var(--bgl-orange-60);
 }
 
 .border-orange-60 {
@@ -2031,6 +2188,7 @@
 
 .bg-turquoise-60 {
     background: var(--bgl-turquoise-60) !important;
+    --alpha-color: var(--bgl-turquoise-60);
 }
 
 .color-turquoise-60 {
@@ -2040,6 +2198,7 @@
 .bg-input-turquoise-60 input,
 .bg-input-turquoise-60 .selectinput-btn {
     background: var(--bgl-turquoise-60) !important;
+    --alpha-color: var(--bgl-turquoise-60);
 }
 
 .border-turquoise-60 {
@@ -2052,6 +2211,7 @@
 
 .bg-gray-60 {
     background: var(--bgl-gray-60) !important;
+    --alpha-color: var(--bgl-gray-60);
 }
 
 .color-gray-60 {
@@ -2061,6 +2221,7 @@
 .bg-input-gray-60 input,
 .bg-input-gray-60 .selectinput-btn {
     background: var(--bgl-gray-60) !important;
+    --alpha-color: var(--bgl-gray-60);
 }
 
 .border-gray-60 {
@@ -2073,6 +2234,7 @@
 
 .bg-black-60 {
     background: var(--bgl-black-60) !important;
+    --alpha-color: var(--bgl-black-60);
 }
 
 .color-black-60 {
@@ -2082,6 +2244,7 @@
 .bg-input-black-60 input,
 .bg-input-black-60 .selectinput-btn {
     background: var(--bgl-black-60) !important;
+    --alpha-color: var(--bgl-black-60);
 }
 
 .border-black-60 {
@@ -2094,6 +2257,7 @@
 
 .bg-pink-60 {
     background: var(--bgl-pink-60) !important;
+    --alpha-color: var(--bgl-pink-60);
 }
 
 .color-pink-60 {
@@ -2103,6 +2267,7 @@
 .bg-input-pink-60 input,
 .bg-input-pink-60 .selectinput-btn {
     background: var(--bgl-pink-60) !important;
+    --alpha-color: var(--bgl-pink-60);
 }
 
 .border-pink-60 {
@@ -2116,6 +2281,7 @@
 /* 70% */
 .bg-blue-70 {
     background: var(--bgl-blue-70) !important;
+    --alpha-color: var(--bgl-blue-70);
 }
 
 .color-blue-70 {
@@ -2125,6 +2291,7 @@
 .bg-input-blue-70 input,
 .bg-input-blue-70 .selectinput-btn {
     background: var(--bgl-blue-70) !important;
+    --alpha-color: var(--bgl-blue-70);
 }
 
 .border-blue-70 {
@@ -2137,6 +2304,7 @@
 
 .bg-green-70 {
     background: var(--bgl-green-70) !important;
+    --alpha-color: var(--bgl-green-70);
 }
 
 .color-green-70 {
@@ -2146,6 +2314,7 @@
 .bg-input-green-70 input,
 .bg-input-green-70 .selectinput-btn {
     background: var(--bgl-green-70) !important;
+    --alpha-color: var(--bgl-green-70);
 }
 
 .border-green-70 {
@@ -2158,6 +2327,7 @@
 
 .bg-red-70 {
     background: var(--bgl-red-70) !important;
+    --alpha-color: var(--bgl-red-70);
 }
 
 .color-red-70 {
@@ -2167,6 +2337,7 @@
 .bg-input-red-70 input,
 .bg-input-red-70 .selectinput-btn {
     background: var(--bgl-red-70) !important;
+    --alpha-color: var(--bgl-red-70);
 }
 
 .border-red-70 {
@@ -2179,6 +2350,7 @@
 
 .bg-yellow-70 {
     background: var(--bgl-yellow-70) !important;
+    --alpha-color: var(--bgl-yellow-70);
 }
 
 .color-yellow-70 {
@@ -2188,6 +2360,7 @@
 .bg-input-yellow-70 input,
 .bg-input-yellow-70 .selectinput-btn {
     background: var(--bgl-yellow-70) !important;
+    --alpha-color: var(--bgl-yellow-70);
 }
 
 .border-yellow-70 {
@@ -2200,6 +2373,7 @@
 
 .bg-purple-70 {
     background: var(--bgl-purple-70) !important;
+    --alpha-color: var(--bgl-purple-70);
 }
 
 .color-purple-70 {
@@ -2209,6 +2383,7 @@
 .bg-input-purple-70 input,
 .bg-input-purple-70 .selectinput-btn {
     background: var(--bgl-purple-70) !important;
+    --alpha-color: var(--bgl-purple-70);
 }
 
 .border-purple-70 {
@@ -2221,6 +2396,7 @@
 
 .bg-brown-70 {
     background: var(--bgl-brown-70) !important;
+    --alpha-color: var(--bgl-brown-70);
 }
 
 .color-brown-70 {
@@ -2230,6 +2406,7 @@
 .bg-input-brown-70 input,
 .bg-input-brown-70 .selectinput-btn {
     background: var(--bgl-brown-70) !important;
+    --alpha-color: var(--bgl-brown-70);
 }
 
 .border-brown-70 {
@@ -2242,6 +2419,7 @@
 
 .bg-orange-70 {
     background: var(--bgl-orange-70) !important;
+    --alpha-color: var(--bgl-orange-70);
 }
 
 .color-orange-70 {
@@ -2251,6 +2429,7 @@
 .bg-input-orange-70 input,
 .bg-input-orange-70 .selectinput-btn {
     background: var(--bgl-orange-70) !important;
+    --alpha-color: var(--bgl-orange-70);
 }
 
 .border-orange-70 {
@@ -2263,6 +2442,7 @@
 
 .bg-turquoise-70 {
     background: var(--bgl-turquoise-70) !important;
+    --alpha-color: var(--bgl-turquoise-70);
 }
 
 .color-turquoise-70 {
@@ -2272,6 +2452,7 @@
 .bg-input-turquoise-70 input,
 .bg-input-turquoise-70 .selectinput-btn {
     background: var(--bgl-turquoise-70) !important;
+    --alpha-color: var(--bgl-turquoise-70);
 }
 
 .border-turquoise-70 {
@@ -2284,6 +2465,7 @@
 
 .bg-gray-70 {
     background: var(--bgl-gray-70) !important;
+    --alpha-color: var(--bgl-gray-70);
 }
 
 .color-gray-70 {
@@ -2293,6 +2475,7 @@
 .bg-input-gray-70 input,
 .bg-input-gray-70 .selectinput-btn {
     background: var(--bgl-gray-70) !important;
+    --alpha-color: var(--bgl-gray-70);
 }
 
 .border-gray-70 {
@@ -2305,6 +2488,7 @@
 
 .bg-black-70 {
     background: var(--bgl-black-70) !important;
+    --alpha-color: var(--bgl-black-70);
 }
 
 .color-black-70 {
@@ -2314,6 +2498,7 @@
 .bg-input-black-70 input,
 .bg-input-black-70 .selectinput-btn {
     background: var(--bgl-black-70) !important;
+    --alpha-color: var(--bgl-black-70);
 }
 
 .border-black-70 {
@@ -2326,6 +2511,7 @@
 
 .bg-pink-70 {
     background: var(--bgl-pink-70) !important;
+    --alpha-color: var(--bgl-pink-70);
 }
 
 .color-pink-70 {
@@ -2335,6 +2521,7 @@
 .bg-input-pink-70 input,
 .bg-input-pink-70 .selectinput-btn {
     background: var(--bgl-pink-70) !important;
+    --alpha-color: var(--bgl-pink-70);
 }
 
 .border-pink-70 {
@@ -2345,9 +2532,10 @@
     color: var(--bgl-pink-70) !important;
 }
 
-/* 80% */
+/* Color Variations - 80% */
 .bg-blue-80 {
     background: var(--bgl-blue-80) !important;
+    --alpha-color: var(--bgl-blue-80);
 }
 
 .color-blue-80 {
@@ -2357,6 +2545,7 @@
 .bg-input-blue-80 input,
 .bg-input-blue-80 .selectinput-btn {
     background: var(--bgl-blue-80) !important;
+    --alpha-color: var(--bgl-blue-80);
 }
 
 .border-blue-80 {
@@ -2369,6 +2558,7 @@
 
 .bg-green-80 {
     background: var(--bgl-green-80) !important;
+    --alpha-color: var(--bgl-green-80);
 }
 
 .color-green-80 {
@@ -2378,6 +2568,7 @@
 .bg-input-green-80 input,
 .bg-input-green-80 .selectinput-btn {
     background: var(--bgl-green-80) !important;
+    --alpha-color: var(--bgl-green-80);
 }
 
 .border-green-80 {
@@ -2390,6 +2581,7 @@
 
 .bg-red-80 {
     background: var(--bgl-red-80) !important;
+    --alpha-color: var(--bgl-red-80);
 }
 
 .color-red-80 {
@@ -2399,6 +2591,7 @@
 .bg-input-red-80 input,
 .bg-input-red-80 .selectinput-btn {
     background: var(--bgl-red-80) !important;
+    --alpha-color: var(--bgl-red-80);
 }
 
 .border-red-80 {
@@ -2411,6 +2604,7 @@
 
 .bg-yellow-80 {
     background: var(--bgl-yellow-80) !important;
+    --alpha-color: var(--bgl-yellow-80);
 }
 
 .color-yellow-80 {
@@ -2420,6 +2614,7 @@
 .bg-input-yellow-80 input,
 .bg-input-yellow-80 .selectinput-btn {
     background: var(--bgl-yellow-80) !important;
+    --alpha-color: var(--bgl-yellow-80);
 }
 
 .border-yellow-80 {
@@ -2432,6 +2627,7 @@
 
 .bg-purple-80 {
     background: var(--bgl-purple-80) !important;
+    --alpha-color: var(--bgl-purple-80);
 }
 
 .color-purple-80 {
@@ -2441,6 +2637,7 @@
 .bg-input-purple-80 input,
 .bg-input-purple-80 .selectinput-btn {
     background: var(--bgl-purple-80) !important;
+    --alpha-color: var(--bgl-purple-80);
 }
 
 .border-purple-80 {
@@ -2453,6 +2650,7 @@
 
 .bg-brown-80 {
     background: var(--bgl-brown-80) !important;
+    --alpha-color: var(--bgl-brown-80);
 }
 
 .color-brown-80 {
@@ -2462,6 +2660,7 @@
 .bg-input-brown-80 input,
 .bg-input-brown-80 .selectinput-btn {
     background: var(--bgl-brown-80) !important;
+    --alpha-color: var(--bgl-brown-80);
 }
 
 .border-brown-80 {
@@ -2474,6 +2673,7 @@
 
 .bg-orange-80 {
     background: var(--bgl-orange-80) !important;
+    --alpha-color: var(--bgl-orange-80);
 }
 
 .color-orange-80 {
@@ -2483,6 +2683,7 @@
 .bg-input-orange-80 input,
 .bg-input-orange-80 .selectinput-btn {
     background: var(--bgl-orange-80) !important;
+    --alpha-color: var(--bgl-orange-80);
 }
 
 .border-orange-80 {
@@ -2495,6 +2696,7 @@
 
 .bg-turquoise-80 {
     background: var(--bgl-turquoise-80) !important;
+    --alpha-color: var(--bgl-turquoise-80);
 }
 
 .color-turquoise-80 {
@@ -2504,6 +2706,7 @@
 .bg-input-turquoise-80 input,
 .bg-input-turquoise-80 .selectinput-btn {
     background: var(--bgl-turquoise-80) !important;
+    --alpha-color: var(--bgl-turquoise-80);
 }
 
 .border-turquoise-80 {
@@ -2516,6 +2719,7 @@
 
 .bg-gray-80 {
     background: var(--bgl-gray-80) !important;
+    --alpha-color: var(--bgl-gray-80);
 }
 
 .color-gray-80 {
@@ -2525,6 +2729,7 @@
 .bg-input-gray-80 input,
 .bg-input-gray-80 .selectinput-btn {
     background: var(--bgl-gray-80) !important;
+    --alpha-color: var(--bgl-gray-80);
 }
 
 .border-gray-80 {
@@ -2537,6 +2742,7 @@
 
 .bg-black-80 {
     background: var(--bgl-black-80) !important;
+    --alpha-color: var(--bgl-black-80);
 }
 
 .color-black-80 {
@@ -2546,6 +2752,7 @@
 .bg-input-black-80 input,
 .bg-input-black-80 .selectinput-btn {
     background: var(--bgl-black-80) !important;
+    --alpha-color: var(--bgl-black-80);
 }
 
 .border-black-80 {
@@ -2558,6 +2765,7 @@
 
 .bg-pink-80 {
     background: var(--bgl-pink-80) !important;
+    --alpha-color: var(--bgl-pink-80);
 }
 
 .color-pink-80 {
@@ -2567,6 +2775,7 @@
 .bg-input-pink-80 input,
 .bg-input-pink-80 .selectinput-btn {
     background: var(--bgl-pink-80) !important;
+    --alpha-color: var(--bgl-pink-80);
 }
 
 .border-pink-80 {
@@ -2577,9 +2786,10 @@
     color: var(--bgl-pink-80) !important;
 }
 
-/* 90% */
+/* Color Variations - 90% */
 .bg-blue-90 {
     background: var(--bgl-blue-90) !important;
+    --alpha-color: var(--bgl-blue-90);
 }
 
 .color-blue-90 {
@@ -2589,6 +2799,7 @@
 .bg-input-blue-90 input,
 .bg-input-blue-90 .selectinput-btn {
     background: var(--bgl-blue-90) !important;
+    --alpha-color: var(--bgl-blue-90);
 }
 
 .border-blue-90 {
@@ -2601,6 +2812,7 @@
 
 .bg-green-90 {
     background: var(--bgl-green-90) !important;
+    --alpha-color: var(--bgl-green-90);
 }
 
 .color-green-90 {
@@ -2610,6 +2822,7 @@
 .bg-input-green-90 input,
 .bg-input-green-90 .selectinput-btn {
     background: var(--bgl-green-90) !important;
+    --alpha-color: var(--bgl-green-90);
 }
 
 .border-green-90 {
@@ -2622,6 +2835,7 @@
 
 .bg-red-90 {
     background: var(--bgl-red-90) !important;
+    --alpha-color: var(--bgl-red-90);
 }
 
 .color-red-90 {
@@ -2631,6 +2845,7 @@
 .bg-input-red-90 input,
 .bg-input-red-90 .selectinput-btn {
     background: var(--bgl-red-90) !important;
+    --alpha-color: var(--bgl-red-90);
 }
 
 .border-red-90 {
@@ -2643,6 +2858,7 @@
 
 .bg-yellow-90 {
     background: var(--bgl-yellow-90) !important;
+    --alpha-color: var(--bgl-yellow-90);
 }
 
 .color-yellow-90 {
@@ -2652,6 +2868,7 @@
 .bg-input-yellow-90 input,
 .bg-input-yellow-90 .selectinput-btn {
     background: var(--bgl-yellow-90) !important;
+    --alpha-color: var(--bgl-yellow-90);
 }
 
 .border-yellow-90 {
@@ -2664,6 +2881,7 @@
 
 .bg-purple-90 {
     background: var(--bgl-purple-90) !important;
+    --alpha-color: var(--bgl-purple-90);
 }
 
 .color-purple-90 {
@@ -2673,6 +2891,7 @@
 .bg-input-purple-90 input,
 .bg-input-purple-90 .selectinput-btn {
     background: var(--bgl-purple-90) !important;
+    --alpha-color: var(--bgl-purple-90);
 }
 
 .border-purple-90 {
@@ -2685,6 +2904,7 @@
 
 .bg-brown-90 {
     background: var(--bgl-brown-90) !important;
+    --alpha-color: var(--bgl-brown-90);
 }
 
 .color-brown-90 {
@@ -2694,6 +2914,7 @@
 .bg-input-brown-90 input,
 .bg-input-brown-90 .selectinput-btn {
     background: var(--bgl-brown-90) !important;
+    --alpha-color: var(--bgl-brown-90);
 }
 
 .border-brown-90 {
@@ -2706,6 +2927,7 @@
 
 .bg-orange-90 {
     background: var(--bgl-orange-90) !important;
+    --alpha-color: var(--bgl-orange-90);
 }
 
 .color-orange-90 {
@@ -2715,6 +2937,7 @@
 .bg-input-orange-90 input,
 .bg-input-orange-90 .selectinput-btn {
     background: var(--bgl-orange-90) !important;
+    --alpha-color: var(--bgl-orange-90);
 }
 
 .border-orange-90 {
@@ -2727,6 +2950,7 @@
 
 .bg-turquoise-90 {
     background: var(--bgl-turquoise-90) !important;
+    --alpha-color: var(--bgl-turquoise-90);
 }
 
 .color-turquoise-90 {
@@ -2736,6 +2960,7 @@
 .bg-input-turquoise-90 input,
 .bg-input-turquoise-90 .selectinput-btn {
     background: var(--bgl-turquoise-90) !important;
+    --alpha-color: var(--bgl-turquoise-90);
 }
 
 .border-turquoise-90 {
@@ -2748,6 +2973,7 @@
 
 .bg-gray-90 {
     background: var(--bgl-gray-90) !important;
+    --alpha-color: var(--bgl-gray-90);
 }
 
 .color-gray-90 {
@@ -2757,6 +2983,7 @@
 .bg-input-gray-90 input,
 .bg-input-gray-90 .selectinput-btn {
     background: var(--bgl-gray-90) !important;
+    --alpha-color: var(--bgl-gray-90);
 }
 
 .border-gray-90 {
@@ -2769,6 +2996,7 @@
 
 .bg-black-90 {
     background: var(--bgl-black-90) !important;
+    --alpha-color: var(--bgl-black-90);
 }
 
 .color-black-90 {
@@ -2778,6 +3006,7 @@
 .bg-input-black-90 input,
 .bg-input-black-90 .selectinput-btn {
     background: var(--bgl-black-90) !important;
+    --alpha-color: var(--bgl-black-90);
 }
 
 .border-black-90 {
@@ -2790,6 +3019,7 @@
 
 .bg-pink-90 {
     background: var(--bgl-pink-90) !important;
+    --alpha-color: var(--bgl-pink-90);
 }
 
 .color-pink-90 {
@@ -2799,6 +3029,7 @@
 .bg-input-pink-90 input,
 .bg-input-pink-90 .selectinput-btn {
     background: var(--bgl-pink-90) !important;
+    --alpha-color: var(--bgl-pink-90);
 }
 
 .border-pink-90 {
@@ -2813,6 +3044,7 @@
 /* 100% */
 .bg-blue-100 {
     background: var(--bgl-blue-100) !important;
+    --alpha-color: var(--bgl-blue-100);
 }
 
 .color-blue-100 {
@@ -2822,6 +3054,7 @@
 .bg-input-blue-100 input,
 .bg-input-blue-100 .selectinput-btn {
     background: var(--bgl-blue-100) !important;
+    --alpha-color: var(--bgl-blue-100);
 }
 
 .border-blue-100 {
@@ -2834,6 +3067,7 @@
 
 .bg-green-100 {
     background: var(--bgl-green-100) !important;
+    --alpha-color: var(--bgl-green-100);
 }
 
 .color-green-100 {
@@ -2843,6 +3077,7 @@
 .bg-input-green-100 input,
 .bg-input-green-100 .selectinput-btn {
     background: var(--bgl-green-100) !important;
+    --alpha-color: var(--bgl-green-100);
 }
 
 .border-green-100 {
@@ -2855,6 +3090,7 @@
 
 .bg-red-100 {
     background: var(--bgl-red-100) !important;
+    --alpha-color: var(--bgl-red-100);
 }
 
 .color-red-100 {
@@ -2864,6 +3100,7 @@
 .bg-input-red-100 input,
 .bg-input-red-100 .selectinput-btn {
     background: var(--bgl-red-100) !important;
+    --alpha-color: var(--bgl-red-100);
 }
 
 .border-red-100 {
@@ -2876,6 +3113,7 @@
 
 .bg-yellow-100 {
     background: var(--bgl-yellow-100) !important;
+    --alpha-color: var(--bgl-yellow-100);
 }
 
 .color-yellow-100 {
@@ -2885,6 +3123,7 @@
 .bg-input-yellow-100 input,
 .bg-input-yellow-100 .selectinput-btn {
     background: var(--bgl-yellow-100) !important;
+    --alpha-color: var(--bgl-yellow-100);
 }
 
 .border-yellow-100 {
@@ -2897,6 +3136,7 @@
 
 .bg-purple-100 {
     background: var(--bgl-purple-100) !important;
+    --alpha-color: var(--bgl-purple-100);
 }
 
 .color-purple-100 {
@@ -2906,6 +3146,7 @@
 .bg-input-purple-100 input,
 .bg-input-purple-100 .selectinput-btn {
     background: var(--bgl-purple-100) !important;
+    --alpha-color: var(--bgl-purple-100);
 }
 
 .border-purple-100 {
@@ -2918,6 +3159,7 @@
 
 .bg-brown-100 {
     background: var(--bgl-brown-100) !important;
+    --alpha-color: var(--bgl-brown-100);
 }
 
 .color-brown-100 {
@@ -2927,6 +3169,7 @@
 .bg-input-brown-100 input,
 .bg-input-brown-100 .selectinput-btn {
     background: var(--bgl-brown-100) !important;
+    --alpha-color: var(--bgl-brown-100);
 }
 
 .border-brown-100 {
@@ -2939,6 +3182,7 @@
 
 .bg-orange-100 {
     background: var(--bgl-orange-100) !important;
+    --alpha-color: var(--bgl-orange-100);
 }
 
 .color-orange-100 {
@@ -2948,6 +3192,7 @@
 .bg-input-orange-100 input,
 .bg-input-orange-100 .selectinput-btn {
     background: var(--bgl-orange-100) !important;
+    --alpha-color: var(--bgl-orange-100);
 }
 
 .border-orange-100 {
@@ -2960,6 +3205,7 @@
 
 .bg-turquoise-100 {
     background: var(--bgl-turquoise-100) !important;
+    --alpha-color: var(--bgl-turquoise-100);
 }
 
 .color-turquoise-100 {
@@ -2969,6 +3215,7 @@
 .bg-input-turquoise-100 input,
 .bg-input-turquoise-100 .selectinput-btn {
     background: var(--bgl-turquoise-100) !important;
+    --alpha-color: var(--bgl-turquoise-100);
 }
 
 .border-turquoise-100 {
@@ -2981,6 +3228,7 @@
 
 .bg-gray-100 {
     background: var(--bgl-gray-100) !important;
+    --alpha-color: var(--bgl-gray-100);
 }
 
 .color-gray-100 {
@@ -2990,6 +3238,7 @@
 .bg-input-gray-100 input,
 .bg-input-gray-100 .selectinput-btn {
     background: var(--bgl-gray-100) !important;
+    --alpha-color: var(--bgl-gray-100);
 }
 
 .border-gray-100 {
@@ -3002,6 +3251,7 @@
 
 .bg-black-100 {
     background: var(--bgl-black-100) !important;
+    --alpha-color: var(--bgl-black-100);
 }
 
 .color-black-100 {
@@ -3011,6 +3261,7 @@
 .bg-input-black-100 input,
 .bg-input-black-100 .selectinput-btn {
     background: var(--bgl-black-100) !important;
+    --alpha-color: var(--bgl-black-100);
 }
 
 .border-black-100 {
@@ -3023,6 +3274,7 @@
 
 .bg-pink-100 {
     background: var(--bgl-pink-100) !important;
+    --alpha-color: var(--bgl-pink-100);
 }
 
 .color-pink-100 {
@@ -3032,6 +3284,7 @@
 .bg-input-pink-100 input,
 .bg-input-pink-100 .selectinput-btn {
     background: var(--bgl-pink-100) !important;
+    --alpha-color: var(--bgl-pink-100);
 }
 
 .border-pink-100 {
@@ -3045,6 +3298,7 @@
 /* 110% */
 .bg-blue-110 {
     background: var(--bgl-blue-110) !important;
+    --alpha-color: var(--bgl-blue-110);
 }
 
 .color-blue-110 {
@@ -3054,6 +3308,7 @@
 .bg-input-blue-110 input,
 .bg-input-blue-110 .selectinput-btn {
     background: var(--bgl-blue-110) !important;
+    --alpha-color: var(--bgl-blue-110);
 }
 
 .border-blue-110 {
@@ -3066,6 +3321,7 @@
 
 .bg-green-110 {
     background: var(--bgl-green-110) !important;
+    --alpha-color: var(--bgl-green-110);
 }
 
 .color-green-110 {
@@ -3075,6 +3331,7 @@
 .bg-input-green-110 input,
 .bg-input-green-110 .selectinput-btn {
     background: var(--bgl-green-110) !important;
+    --alpha-color: var(--bgl-green-110);
 }
 
 .border-green-110 {
@@ -3087,6 +3344,7 @@
 
 .bg-red-110 {
     background: var(--bgl-red-110) !important;
+    --alpha-color: var(--bgl-red-110);
 }
 
 .color-red-110 {
@@ -3096,6 +3354,7 @@
 .bg-input-red-110 input,
 .bg-input-red-110 .selectinput-btn {
     background: var(--bgl-red-110) !important;
+    --alpha-color: var(--bgl-red-110);
 }
 
 .border-red-110 {
@@ -3108,6 +3367,7 @@
 
 .bg-yellow-110 {
     background: var(--bgl-yellow-110) !important;
+    --alpha-color: var(--bgl-yellow-110);
 }
 
 .color-yellow-110 {
@@ -3117,6 +3377,7 @@
 .bg-input-yellow-110 input,
 .bg-input-yellow-110 .selectinput-btn {
     background: var(--bgl-yellow-110) !important;
+    --alpha-color: var(--bgl-yellow-110);
 }
 
 .border-yellow-110 {
@@ -3129,6 +3390,7 @@
 
 .bg-purple-110 {
     background: var(--bgl-purple-110) !important;
+    --alpha-color: var(--bgl-purple-110);
 }
 
 .color-purple-110 {
@@ -3138,6 +3400,7 @@
 .bg-input-purple-110 input,
 .bg-input-purple-110 .selectinput-btn {
     background: var(--bgl-purple-110) !important;
+    --alpha-color: var(--bgl-purple-110);
 }
 
 .border-purple-110 {
@@ -3150,6 +3413,7 @@
 
 .bg-brown-110 {
     background: var(--bgl-brown-110) !important;
+    --alpha-color: var(--bgl-brown-110);
 }
 
 .color-brown-110 {
@@ -3159,6 +3423,7 @@
 .bg-input-brown-110 input,
 .bg-input-brown-110 .selectinput-btn {
     background: var(--bgl-brown-110) !important;
+    --alpha-color: var(--bgl-brown-110);
 }
 
 .border-brown-110 {
@@ -3171,6 +3436,7 @@
 
 .bg-orange-110 {
     background: var(--bgl-orange-110) !important;
+    --alpha-color: var(--bgl-orange-110);
 }
 
 .color-orange-110 {
@@ -3180,6 +3446,7 @@
 .bg-input-orange-110 input,
 .bg-input-orange-110 .selectinput-btn {
     background: var(--bgl-orange-110) !important;
+    --alpha-color: var(--bgl-orange-110);
 }
 
 .border-orange-110 {
@@ -3192,6 +3459,7 @@
 
 .bg-turquoise-110 {
     background: var(--bgl-turquoise-110) !important;
+    --alpha-color: var(--bgl-turquoise-110);
 }
 
 .color-turquoise-110 {
@@ -3201,6 +3469,7 @@
 .bg-input-turquoise-110 input,
 .bg-input-turquoise-110 .selectinput-btn {
     background: var(--bgl-turquoise-110) !important;
+    --alpha-color: var(--bgl-turquoise-110);
 }
 
 .border-turquoise-110 {
@@ -3213,6 +3482,7 @@
 
 .bg-gray-110 {
     background: var(--bgl-gray-110) !important;
+    --alpha-color: var(--bgl-gray-110);
 }
 
 .color-gray-110 {
@@ -3222,6 +3492,7 @@
 .bg-input-gray-110 input,
 .bg-input-gray-110 .selectinput-btn {
     background: var(--bgl-gray-110) !important;
+    --alpha-color: var(--bgl-gray-110);
 }
 
 .border-gray-110 {
@@ -3234,6 +3505,7 @@
 
 .bg-black-110 {
     background: var(--bgl-black-110) !important;
+    --alpha-color: var(--bgl-black-110);
 }
 
 .color-black-110 {
@@ -3243,6 +3515,7 @@
 .bg-input-black-110 input,
 .bg-input-black-110 .selectinput-btn {
     background: var(--bgl-black-110) !important;
+    --alpha-color: var(--bgl-black-110);
 }
 
 .border-black-110 {
@@ -3255,6 +3528,7 @@
 
 .bg-pink-110 {
     background: var(--bgl-pink-110) !important;
+    --alpha-color: var(--bgl-pink-110);
 }
 
 .color-pink-110 {
@@ -3264,6 +3538,7 @@
 .bg-input-pink-110 input,
 .bg-input-pink-110 .selectinput-btn {
     background: var(--bgl-pink-110) !important;
+    --alpha-color: var(--bgl-pink-110);
 }
 
 .border-pink-110 {
@@ -3277,6 +3552,7 @@
 /* 120% */
 .bg-blue-120 {
     background: var(--bgl-blue-120) !important;
+    --alpha-color: var(--bgl-blue-120);
 }
 
 .color-blue-120 {
@@ -3286,6 +3562,7 @@
 .bg-input-blue-120 input,
 .bg-input-blue-120 .selectinput-btn {
     background: var(--bgl-blue-120) !important;
+    --alpha-color: var(--bgl-blue-120);
 }
 
 .border-blue-120 {
@@ -3298,6 +3575,7 @@
 
 .bg-green-120 {
     background: var(--bgl-green-120) !important;
+    --alpha-color: var(--bgl-green-120);
 }
 
 .color-green-120 {
@@ -3307,6 +3585,7 @@
 .bg-input-green-120 input,
 .bg-input-green-120 .selectinput-btn {
     background: var(--bgl-green-120) !important;
+    --alpha-color: var(--bgl-green-120);
 }
 
 .border-green-120 {
@@ -3319,6 +3598,7 @@
 
 .bg-red-120 {
     background: var(--bgl-red-120) !important;
+    --alpha-color: var(--bgl-red-120);
 }
 
 .color-red-120 {
@@ -3328,6 +3608,7 @@
 .bg-input-red-120 input,
 .bg-input-red-120 .selectinput-btn {
     background: var(--bgl-red-120) !important;
+    --alpha-color: var(--bgl-red-120);
 }
 
 .border-red-120 {
@@ -3340,6 +3621,7 @@
 
 .bg-yellow-120 {
     background: var(--bgl-yellow-120) !important;
+    --alpha-color: var(--bgl-yellow-120);
 }
 
 .color-yellow-120 {
@@ -3349,6 +3631,7 @@
 .bg-input-yellow-120 input,
 .bg-input-yellow-120 .selectinput-btn {
     background: var(--bgl-yellow-120) !important;
+    --alpha-color: var(--bgl-yellow-120);
 }
 
 .border-yellow-120 {
@@ -3361,6 +3644,7 @@
 
 .bg-purple-120 {
     background: var(--bgl-purple-120) !important;
+    --alpha-color: var(--bgl-purple-120);
 }
 
 .color-purple-120 {
@@ -3370,6 +3654,7 @@
 .bg-input-purple-120 input,
 .bg-input-purple-120 .selectinput-btn {
     background: var(--bgl-purple-120) !important;
+    --alpha-color: var(--bgl-purple-120);
 }
 
 .border-purple-120 {
@@ -3382,6 +3667,7 @@
 
 .bg-brown-120 {
     background: var(--bgl-brown-120) !important;
+    --alpha-color: var(--bgl-brown-120);
 }
 
 .color-brown-120 {
@@ -3391,6 +3677,7 @@
 .bg-input-brown-120 input,
 .bg-input-brown-120 .selectinput-btn {
     background: var(--bgl-brown-120) !important;
+    --alpha-color: var(--bgl-brown-120);
 }
 
 .border-brown-120 {
@@ -3403,6 +3690,7 @@
 
 .bg-orange-120 {
     background: var(--bgl-orange-120) !important;
+    --alpha-color: var(--bgl-orange-120);
 }
 
 .color-orange-120 {
@@ -3412,6 +3700,7 @@
 .bg-input-orange-120 input,
 .bg-input-orange-120 .selectinput-btn {
     background: var(--bgl-orange-120) !important;
+    --alpha-color: var(--bgl-orange-120);
 }
 
 .border-orange-120 {
@@ -3424,6 +3713,7 @@
 
 .bg-turquoise-120 {
     background: var(--bgl-turquoise-120) !important;
+    --alpha-color: var(--bgl-turquoise-120);
 }
 
 .color-turquoise-120 {
@@ -3433,6 +3723,7 @@
 .bg-input-turquoise-120 input,
 .bg-input-turquoise-120 .selectinput-btn {
     background: var(--bgl-turquoise-120) !important;
+    --alpha-color: var(--bgl-turquoise-120);
 }
 
 .border-turquoise-120 {
@@ -3445,6 +3736,7 @@
 
 .bg-gray-120 {
     background: var(--bgl-gray-120) !important;
+    --alpha-color: var(--bgl-gray-120);
 }
 
 .color-gray-120 {
@@ -3454,6 +3746,7 @@
 .bg-input-gray-120 input,
 .bg-input-gray-120 .selectinput-btn {
     background: var(--bgl-gray-120) !important;
+    --alpha-color: var(--bgl-gray-120);
 }
 
 .border-gray-120 {
@@ -3466,6 +3759,7 @@
 
 .bg-black-120 {
     background: var(--bgl-black-120) !important;
+    --alpha-color: var(--bgl-black-120);
 }
 
 .color-black-120 {
@@ -3475,6 +3769,7 @@
 .bg-input-black-120 input,
 .bg-input-black-120 .selectinput-btn {
     background: var(--bgl-black-120) !important;
+    --alpha-color: var(--bgl-black-120);
 }
 
 .border-black-120 {
@@ -3487,6 +3782,7 @@
 
 .bg-pink-120 {
     background: var(--bgl-pink-120) !important;
+    --alpha-color: var(--bgl-pink-120);
 }
 
 .color-pink-120 {
@@ -3496,6 +3792,7 @@
 .bg-input-pink-120 input,
 .bg-input-pink-120 .selectinput-btn {
     background: var(--bgl-pink-120) !important;
+    --alpha-color: var(--bgl-pink-120);
 }
 
 .border-pink-120 {
@@ -3509,6 +3806,7 @@
 /* 130% */
 .bg-blue-130 {
     background: var(--bgl-blue-130) !important;
+    --alpha-color: var(--bgl-blue-130);
 }
 
 .color-blue-130 {
@@ -3518,6 +3816,7 @@
 .bg-input-blue-130 input,
 .bg-input-blue-130 .selectinput-btn {
     background: var(--bgl-blue-130) !important;
+    --alpha-color: var(--bgl-blue-130);
 }
 
 .border-blue-130 {
@@ -3530,6 +3829,7 @@
 
 .bg-green-130 {
     background: var(--bgl-green-130) !important;
+    --alpha-color: var(--bgl-green-130);
 }
 
 .color-green-130 {
@@ -3539,6 +3839,7 @@
 .bg-input-green-130 input,
 .bg-input-green-130 .selectinput-btn {
     background: var(--bgl-green-130) !important;
+    --alpha-color: var(--bgl-green-130);
 }
 
 .border-green-130 {
@@ -3551,6 +3852,7 @@
 
 .bg-red-130 {
     background: var(--bgl-red-130) !important;
+    --alpha-color: var(--bgl-red-130);
 }
 
 .color-red-130 {
@@ -3560,6 +3862,7 @@
 .bg-input-red-130 input,
 .bg-input-red-130 .selectinput-btn {
     background: var(--bgl-red-130) !important;
+    --alpha-color: var(--bgl-red-130);
 }
 
 .border-red-130 {
@@ -3572,6 +3875,7 @@
 
 .bg-yellow-130 {
     background: var(--bgl-yellow-130) !important;
+    --alpha-color: var(--bgl-yellow-130);
 }
 
 .color-yellow-130 {
@@ -3581,6 +3885,7 @@
 .bg-input-yellow-130 input,
 .bg-input-yellow-130 .selectinput-btn {
     background: var(--bgl-yellow-130) !important;
+    --alpha-color: var(--bgl-yellow-130);
 }
 
 .border-yellow-130 {
@@ -3593,6 +3898,7 @@
 
 .bg-purple-130 {
     background: var(--bgl-purple-130) !important;
+    --alpha-color: var(--bgl-purple-130);
 }
 
 .color-purple-130 {
@@ -3602,6 +3908,7 @@
 .bg-input-purple-130 input,
 .bg-input-purple-130 .selectinput-btn {
     background: var(--bgl-purple-130) !important;
+    --alpha-color: var(--bgl-purple-130);
 }
 
 .border-purple-130 {
@@ -3614,6 +3921,7 @@
 
 .bg-brown-130 {
     background: var(--bgl-brown-130) !important;
+    --alpha-color: var(--bgl-brown-130);
 }
 
 .color-brown-130 {
@@ -3623,6 +3931,7 @@
 .bg-input-brown-130 input,
 .bg-input-brown-130 .selectinput-btn {
     background: var(--bgl-brown-130) !important;
+    --alpha-color: var(--bgl-brown-130);
 }
 
 .border-brown-130 {
@@ -3635,6 +3944,7 @@
 
 .bg-orange-130 {
     background: var(--bgl-orange-130) !important;
+    --alpha-color: var(--bgl-orange-130);
 }
 
 .color-orange-130 {
@@ -3644,6 +3954,7 @@
 .bg-input-orange-130 input,
 .bg-input-orange-130 .selectinput-btn {
     background: var(--bgl-orange-130) !important;
+    --alpha-color: var(--bgl-orange-130);
 }
 
 .border-orange-130 {
@@ -3656,6 +3967,7 @@
 
 .bg-turquoise-130 {
     background: var(--bgl-turquoise-130) !important;
+    --alpha-color: var(--bgl-turquoise-130);
 }
 
 .color-turquoise-130 {
@@ -3665,6 +3977,7 @@
 .bg-input-turquoise-130 input,
 .bg-input-turquoise-130 .selectinput-btn {
     background: var(--bgl-turquoise-130) !important;
+    --alpha-color: var(--bgl-turquoise-130);
 }
 
 .border-turquoise-130 {
@@ -3677,6 +3990,7 @@
 
 .bg-gray-130 {
     background: var(--bgl-gray-130) !important;
+    --alpha-color: var(--bgl-gray-130);
 }
 
 .color-gray-130 {
@@ -3686,6 +4000,7 @@
 .bg-input-gray-130 input,
 .bg-input-gray-130 .selectinput-btn {
     background: var(--bgl-gray-130) !important;
+    --alpha-color: var(--bgl-gray-130);
 }
 
 .border-gray-130 {
@@ -3698,6 +4013,7 @@
 
 .bg-black-130 {
     background: var(--bgl-black-130) !important;
+    --alpha-color: var(--bgl-black-130);
 }
 
 .color-black-130 {
@@ -3707,6 +4023,7 @@
 .bg-input-black-130 input,
 .bg-input-black-130 .selectinput-btn {
     background: var(--bgl-black-130) !important;
+    --alpha-color: var(--bgl-black-130);
 }
 
 .border-black-130 {
@@ -3719,6 +4036,7 @@
 
 .bg-pink-130 {
     background: var(--bgl-pink-130) !important;
+    --alpha-color: var(--bgl-pink-130);
 }
 
 .color-pink-130 {
@@ -3728,6 +4046,7 @@
 .bg-input-pink-130 input,
 .bg-input-pink-130 .selectinput-btn {
     background: var(--bgl-pink-130) !important;
+    --alpha-color: var(--bgl-pink-130);
 }
 
 .border-pink-130 {
@@ -3736,4 +4055,184 @@
 
 .color-input-pink-130 input {
     color: var(--bgl-pink-130) !important;
+}
+
+/* Alpha system using color-mix - works with existing bg- classes */
+.alpha-10 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 10%, transparent) !important;
+}
+
+.alpha-20 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 20%, transparent) !important;
+}
+
+.alpha-30 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 30%, transparent) !important;
+}
+
+.alpha-40 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 40%, transparent) !important;
+}
+
+.alpha-50 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 50%, transparent) !important;
+}
+
+.alpha-60 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 60%, transparent) !important;
+}
+
+.alpha-70 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 70%, transparent) !important;
+}
+
+.alpha-80 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 80%, transparent) !important;
+}
+
+.alpha-90 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 90%, transparent) !important;
+}
+
+/* Update existing bg- classes to set --alpha-color */
+.bg-white {
+    background: var(--bgl-white) !important;
+    --alpha-color: var(--bgl-white);
+}
+
+.bg-black {
+    background: var(--bgl-black) !important;
+    --alpha-color: var(--bgl-black);
+}
+
+.bg-primary {
+    background: var(--bgl-primary) !important;
+    --alpha-color: var(--bgl-primary);
+}
+
+.bg-blue {
+    background: var(--bgl-blue) !important;
+    --alpha-color: var(--bgl-blue);
+}
+
+.bg-green {
+    background: var(--bgl-green) !important;
+    --alpha-color: var(--bgl-green);
+}
+
+.bg-red {
+    background: var(--bgl-red) !important;
+    --alpha-color: var(--bgl-red);
+}
+
+.bg-yellow {
+    background: var(--bgl-yellow) !important;
+    --alpha-color: var(--bgl-yellow);
+}
+
+.bg-purple {
+    background: var(--bgl-purple) !important;
+    --alpha-color: var(--bgl-purple);
+}
+
+.bg-brown {
+    background: var(--bgl-brown) !important;
+    --alpha-color: var(--bgl-brown);
+}
+
+.bg-orange {
+    background: var(--bgl-orange) !important;
+    --alpha-color: var(--bgl-orange);
+}
+
+.bg-turquoise {
+    background: var(--bgl-turquoise) !important;
+    --alpha-color: var(--bgl-turquoise);
+}
+
+.bg-pink {
+    background: var(--bgl-pink) !important;
+    --alpha-color: var(--bgl-pink);
+}
+
+.bg-gray {
+    background: var(--bgl-gray) !important;
+    --alpha-color: var(--bgl-gray);
+}
+
+/* Alpha system using color-mix - works with existing bg- classes */
+.alpha-5 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 5%, transparent) !important;
+}
+
+.alpha-10 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 10%, transparent) !important;
+}
+
+.alpha-15 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 15%, transparent) !important;
+}
+
+.alpha-20 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 20%, transparent) !important;
+}
+
+.alpha-25 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 25%, transparent) !important;
+}
+
+.alpha-30 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 30%, transparent) !important;
+}
+
+.alpha-35 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 35%, transparent) !important;
+}
+
+.alpha-40 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 40%, transparent) !important;
+}
+
+.alpha-45 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 45%, transparent) !important;
+}
+
+.alpha-50 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 50%, transparent) !important;
+}
+
+.alpha-55 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 55%, transparent) !important;
+}
+
+.alpha-60 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 60%, transparent) !important;
+}
+
+.alpha-65 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 65%, transparent) !important;
+}
+
+.alpha-70 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 70%, transparent) !important;
+}
+
+.alpha-75 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 75%, transparent) !important;
+}
+
+.alpha-80 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 80%, transparent) !important;
+}
+
+.alpha-85 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 85%, transparent) !important;
+}
+
+.alpha-90 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 90%, transparent) !important;
+}
+
+.alpha-95 {
+    background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 95%, transparent) !important;
 }