@bagelink/vue 1.12.36 → 1.12.38

package/src/styles/mobileColors.css

@@ -1095,6 +1095,30 @@
         color: var(--bgl-pink-10) !important;
     }
 
+    .m_bg-primary-10 {
+        background: var(--bgl-primary-10) !important;
+        --alpha-color: var(--bgl-primary-10);
+    }
+
+    .m_color-primary-10 {
+        color: var(--bgl-primary-10) !important;
+    }
+
+    .m_bg-input-primary-10 input,
+    .m_bg-input-primary-10 textarea,
+    .m_bg-input-primary-10 .selectinput-btn {
+        background: var(--bgl-primary-10) !important;
+        --alpha-color: var(--bgl-primary-10);
+    }
+
+    .m_border-primary-10 {
+        border-color: var(--bgl-primary-10) !important;
+    }
+
+    .m_color-input-primary-10 input {
+        color: var(--bgl-primary-10) !important;
+    }
+
     /* Color Variations - 20% */
     .m_bg-blue-20 {
         background: var(--bgl-blue-20) !important;
@@ -1360,6 +1384,30 @@
         color: var(--bgl-pink-20) !important;
     }
 
+    .m_bg-primary-20 {
+        background: var(--bgl-primary-20) !important;
+        --alpha-color: var(--bgl-primary-20);
+    }
+
+    .m_color-primary-20 {
+        color: var(--bgl-primary-20) !important;
+    }
+
+    .m_bg-input-primary-20 input,
+    .m_bg-input-primary-20 textarea,
+    .m_bg-input-primary-20 .selectinput-btn {
+        background: var(--bgl-primary-20) !important;
+        --alpha-color: var(--bgl-primary-20);
+    }
+
+    .m_border-primary-20 {
+        border-color: var(--bgl-primary-20) !important;
+    }
+
+    .m_color-input-primary-20 input {
+        color: var(--bgl-primary-20) !important;
+    }
+
     /* Color Variations - 30% */
     .m_bg-blue-30 {
         background: var(--bgl-blue-30) !important;
@@ -1625,6 +1673,30 @@
         color: var(--bgl-pink-30) !important;
     }
 
+    .m_bg-primary-30 {
+        background: var(--bgl-primary-30) !important;
+        --alpha-color: var(--bgl-primary-30);
+    }
+
+    .m_color-primary-30 {
+        color: var(--bgl-primary-30) !important;
+    }
+
+    .m_bg-input-primary-30 input,
+    .m_bg-input-primary-30 textarea,
+    .m_bg-input-primary-30 .selectinput-btn {
+        background: var(--bgl-primary-30) !important;
+        --alpha-color: var(--bgl-primary-30);
+    }
+
+    .m_border-primary-30 {
+        border-color: var(--bgl-primary-30) !important;
+    }
+
+    .m_color-input-primary-30 input {
+        color: var(--bgl-primary-30) !important;
+    }
+
     /* Color Variations - 40% & 50% */
     /* 40% */
     .m_bg-blue-40 {
@@ -1891,6 +1963,30 @@
         color: var(--bgl-pink-40) !important;
     }
 
+    .m_bg-primary-40 {
+        background: var(--bgl-primary-40) !important;
+        --alpha-color: var(--bgl-primary-40);
+    }
+
+    .m_color-primary-40 {
+        color: var(--bgl-primary-40) !important;
+    }
+
+    .m_bg-input-primary-40 input,
+    .m_bg-input-primary-40 textarea,
+    .m_bg-input-primary-40 .selectinput-btn {
+        background: var(--bgl-primary-40) !important;
+        --alpha-color: var(--bgl-primary-40);
+    }
+
+    .m_border-primary-40 {
+        border-color: var(--bgl-primary-40) !important;
+    }
+
+    .m_color-input-primary-40 input {
+        color: var(--bgl-primary-40) !important;
+    }
+
     /* 50% */
     .m_bg-blue-50 {
         background: var(--bgl-blue-50) !important;
@@ -2156,6 +2252,30 @@
         color: var(--bgl-pink-50) !important;
     }
 
+    .m_bg-primary-50 {
+        background: var(--bgl-primary-50) !important;
+        --alpha-color: var(--bgl-primary-50);
+    }
+
+    .m_color-primary-50 {
+        color: var(--bgl-primary-50) !important;
+    }
+
+    .m_bg-input-primary-50 input,
+    .m_bg-input-primary-50 textarea,
+    .m_bg-input-primary-50 .selectinput-btn {
+        background: var(--bgl-primary-50) !important;
+        --alpha-color: var(--bgl-primary-50);
+    }
+
+    .m_border-primary-50 {
+        border-color: var(--bgl-primary-50) !important;
+    }
+
+    .m_color-input-primary-50 input {
+        color: var(--bgl-primary-50) !important;
+    }
+
     /* Color Variations - 60%, 70%, 80%, 90% */
     /* 60% */
     .m_bg-blue-60 {
@@ -2422,6 +2542,30 @@
         color: var(--bgl-pink-60) !important;
     }
 
+    .m_bg-primary-60 {
+        background: var(--bgl-primary-60) !important;
+        --alpha-color: var(--bgl-primary-60);
+    }
+
+    .m_color-primary-60 {
+        color: var(--bgl-primary-60) !important;
+    }
+
+    .m_bg-input-primary-60 input,
+    .m_bg-input-primary-60 textarea,
+    .m_bg-input-primary-60 .selectinput-btn {
+        background: var(--bgl-primary-60) !important;
+        --alpha-color: var(--bgl-primary-60);
+    }
+
+    .m_border-primary-60 {
+        border-color: var(--bgl-primary-60) !important;
+    }
+
+    .m_color-input-primary-60 input {
+        color: var(--bgl-primary-60) !important;
+    }
+
     /* 70% */
     .m_bg-blue-70 {
         background: var(--bgl-blue-70) !important;
@@ -2687,6 +2831,30 @@
         color: var(--bgl-pink-70) !important;
     }
 
+    .m_bg-primary-70 {
+        background: var(--bgl-primary-70) !important;
+        --alpha-color: var(--bgl-primary-70);
+    }
+
+    .m_color-primary-70 {
+        color: var(--bgl-primary-70) !important;
+    }
+
+    .m_bg-input-primary-70 input,
+    .m_bg-input-primary-70 textarea,
+    .m_bg-input-primary-70 .selectinput-btn {
+        background: var(--bgl-primary-70) !important;
+        --alpha-color: var(--bgl-primary-70);
+    }
+
+    .m_border-primary-70 {
+        border-color: var(--bgl-primary-70) !important;
+    }
+
+    .m_color-input-primary-70 input {
+        color: var(--bgl-primary-70) !important;
+    }
+
     /* 80% */
     .m_bg-blue-80 {
         background: var(--bgl-blue-80) !important;
@@ -2952,6 +3120,30 @@
         color: var(--bgl-pink-80) !important;
     }
 
+    .m_bg-primary-80 {
+        background: var(--bgl-primary-80) !important;
+        --alpha-color: var(--bgl-primary-80);
+    }
+
+    .m_color-primary-80 {
+        color: var(--bgl-primary-80) !important;
+    }
+
+    .m_bg-input-primary-80 input,
+    .m_bg-input-primary-80 textarea,
+    .m_bg-input-primary-80 .selectinput-btn {
+        background: var(--bgl-primary-80) !important;
+        --alpha-color: var(--bgl-primary-80);
+    }
+
+    .m_border-primary-80 {
+        border-color: var(--bgl-primary-80) !important;
+    }
+
+    .m_color-input-primary-80 input {
+        color: var(--bgl-primary-80) !important;
+    }
+
     /* 90% */
     .m_bg-blue-90 {
         background: var(--bgl-blue-90) !important;
@@ -3217,6 +3409,30 @@
         color: var(--bgl-pink-90) !important;
     }
 
+    .m_bg-primary-90 {
+        background: var(--bgl-primary-90) !important;
+        --alpha-color: var(--bgl-primary-90);
+    }
+
+    .m_color-primary-90 {
+        color: var(--bgl-primary-90) !important;
+    }
+
+    .m_bg-input-primary-90 input,
+    .m_bg-input-primary-90 textarea,
+    .m_bg-input-primary-90 .selectinput-btn {
+        background: var(--bgl-primary-90) !important;
+        --alpha-color: var(--bgl-primary-90);
+    }
+
+    .m_border-primary-90 {
+        border-color: var(--bgl-primary-90) !important;
+    }
+
+    .m_color-input-primary-90 input {
+        color: var(--bgl-primary-90) !important;
+    }
+
     /* Color Variations - 100%, 110%, 120%, 130% */
     /* 100% */
     .m_bg-blue-100 {
@@ -3483,6 +3699,30 @@
         color: var(--bgl-pink-100) !important;
     }
 
+    .m_bg-primary-100 {
+        background: var(--bgl-primary-100) !important;
+        --alpha-color: var(--bgl-primary-100);
+    }
+
+    .m_color-primary-100 {
+        color: var(--bgl-primary-100) !important;
+    }
+
+    .m_bg-input-primary-100 input,
+    .m_bg-input-primary-100 textarea,
+    .m_bg-input-primary-100 .selectinput-btn {
+        background: var(--bgl-primary-100) !important;
+        --alpha-color: var(--bgl-primary-100);
+    }
+
+    .m_border-primary-100 {
+        border-color: var(--bgl-primary-100) !important;
+    }
+
+    .m_color-input-primary-100 input {
+        color: var(--bgl-primary-100) !important;
+    }
+
     /* 110% */
     .m_bg-blue-110 {
         background: var(--bgl-blue-110) !important;
@@ -3748,6 +3988,30 @@
         color: var(--bgl-pink-110) !important;
     }
 
+    .m_bg-primary-110 {
+        background: var(--bgl-primary-110) !important;
+        --alpha-color: var(--bgl-primary-110);
+    }
+
+    .m_color-primary-110 {
+        color: var(--bgl-primary-110) !important;
+    }
+
+    .m_bg-input-primary-110 input,
+    .m_bg-input-primary-110 textarea,
+    .m_bg-input-primary-110 .selectinput-btn {
+        background: var(--bgl-primary-110) !important;
+        --alpha-color: var(--bgl-primary-110);
+    }
+
+    .m_border-primary-110 {
+        border-color: var(--bgl-primary-110) !important;
+    }
+
+    .m_color-input-primary-110 input {
+        color: var(--bgl-primary-110) !important;
+    }
+
     /* 120% */
     .m_bg-blue-120 {
         background: var(--bgl-blue-120) !important;
@@ -4013,6 +4277,30 @@
         color: var(--bgl-pink-120) !important;
     }
 
+    .m_bg-primary-120 {
+        background: var(--bgl-primary-120) !important;
+        --alpha-color: var(--bgl-primary-120);
+    }
+
+    .m_color-primary-120 {
+        color: var(--bgl-primary-120) !important;
+    }
+
+    .m_bg-input-primary-120 input,
+    .m_bg-input-primary-120 textarea,
+    .m_bg-input-primary-120 .selectinput-btn {
+        background: var(--bgl-primary-120) !important;
+        --alpha-color: var(--bgl-primary-120);
+    }
+
+    .m_border-primary-120 {
+        border-color: var(--bgl-primary-120) !important;
+    }
+
+    .m_color-input-primary-120 input {
+        color: var(--bgl-primary-120) !important;
+    }
+
     /* 130% */
     .m_bg-blue-130 {
         background: var(--bgl-blue-130) !important;
@@ -4278,6 +4566,30 @@
         color: var(--bgl-pink-130) !important;
     }
 
+    .m_bg-primary-130 {
+        background: var(--bgl-primary-130) !important;
+        --alpha-color: var(--bgl-primary-130);
+    }
+
+    .m_color-primary-130 {
+        color: var(--bgl-primary-130) !important;
+    }
+
+    .m_bg-input-primary-130 input,
+    .m_bg-input-primary-130 textarea,
+    .m_bg-input-primary-130 .selectinput-btn {
+        background: var(--bgl-primary-130) !important;
+        --alpha-color: var(--bgl-primary-130);
+    }
+
+    .m_border-primary-130 {
+        border-color: var(--bgl-primary-130) !important;
+    }
+
+    .m_color-input-primary-130 input {
+        color: var(--bgl-primary-130) !important;
+    }
+
     /* Alpha system using color-mix - mobile version */
     .m_alpha-5 {
         background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 5%, transparent) !important;

package/src/styles/scrollbar.css

@@ -3,11 +3,17 @@ body>div ::-webkit-scrollbar {
     height: var(--bgl-scrollbar-size);
 }
 
-body>div ::-webkit-scrollbar-track {}
+body>div ::-webkit-scrollbar-track {
+    background: transparent;
+    margin: calc(var(--bgl-scrollbar-size) / 2) 0;
+}
 
 body>div ::-webkit-scrollbar-thumb {
     background-color: var(--bgl-scrollbar-thumb);
     border-radius: 1rem;
+
+    border: calc(var(--bgl-scrollbar-size) / 4) solid transparent;
+    background-clip: content-box;
 }
 
 body>div ::-webkit-scrollbar-corner {

package/src/styles/text.css

@@ -450,6 +450,11 @@
     color: var(--bgl-blue);
 }
 
+.txt-primary-10,
+.txtprimary-10 {
+    color: var(--bgl-primary-10);
+}
+
 .txt-blue-10,
 .txtblue-10 {
     color: var(--bgl-blue-10);
@@ -505,6 +510,11 @@
     color: var(--bgl-pink-10);
 }
 
+.txt-primary-20,
+.txtprimary-20 {
+    color: var(--bgl-primary-20);
+}
+
 .txt-blue-20,
 .txtblue-20 {
     color: var(--bgl-blue-20);
@@ -560,6 +570,11 @@
     color: var(--bgl-pink-20);
 }
 
+.txt-primary-30,
+.txtprimary-30 {
+    color: var(--bgl-primary-30);
+}
+
 .txt-blue-30,
 .txtblue-30 {
     color: var(--bgl-blue-30);
@@ -615,6 +630,11 @@
     color: var(--bgl-pink-30);
 }
 
+.txt-primary-40,
+.txtprimary-40 {
+    color: var(--bgl-primary-40);
+}
+
 .txt-blue-40,
 .txtblue-40 {
     color: var(--bgl-blue-40);
@@ -670,6 +690,11 @@
     color: var(--bgl-pink-40);
 }
 
+.txt-primary-50,
+.txtprimary-50 {
+    color: var(--bgl-primary-50);
+}
+
 .txt-blue-50,
 .txtblue-50 {
     color: var(--bgl-blue-50);
@@ -725,6 +750,11 @@
     color: var(--bgl-pink-50);
 }
 
+.txt-primary-60,
+.txtprimary-60 {
+    color: var(--bgl-primary-60);
+}
+
 .txt-blue-60,
 .txtblue-60 {
     color: var(--bgl-blue-60);
@@ -780,6 +810,11 @@
     color: var(--bgl-pink-60);
 }
 
+.txt-primary-70,
+.txtprimary-70 {
+    color: var(--bgl-primary-70);
+}
+
 .txt-blue-70,
 .txtblue-70 {
     color: var(--bgl-blue-70);
@@ -835,6 +870,11 @@
     color: var(--bgl-pink-70);
 }
 
+.txt-primary-80,
+.txtprimary-80 {
+    color: var(--bgl-primary-80);
+}
+
 .txt-blue-80,
 .txtblue-80 {
     color: var(--bgl-blue-80);
@@ -890,6 +930,11 @@
     color: var(--bgl-pink-80);
 }
 
+.txt-primary-90,
+.txtprimary-90 {
+    color: var(--bgl-primary-90);
+}
+
 .txt-blue-90,
 .txtblue-90 {
     color: var(--bgl-blue-90);
@@ -945,6 +990,11 @@
     color: var(--bgl-pink-90);
 }
 
+.txt-primary-100,
+.txtprimary-100 {
+    color: var(--bgl-primary-100);
+}
+
 .txt-blue-100,
 .txtblue-100 {
     color: var(--bgl-blue-100);
@@ -1000,6 +1050,11 @@
     color: var(--bgl-pink-100);
 }
 
+.txt-primary-110,
+.txtprimary-110 {
+    color: var(--bgl-primary-110);
+}
+
 .txt-blue-110,
 .txtblue-110 {
     color: var(--bgl-blue-110);
@@ -1055,6 +1110,11 @@
     color: var(--bgl-pink-110);
 }
 
+.txt-primary-120,
+.txtprimary-120 {
+    color: var(--bgl-primary-120);
+}
+
 .txt-blue-120,
 .txtblue-120 {
     color: var(--bgl-blue-120);
@@ -1110,6 +1170,11 @@
     color: var(--bgl-pink-120);
 }
 
+.txt-primary-130,
+.txtprimary-130 {
+    color: var(--bgl-primary-130);
+}
+
 .txt-blue-130,
 .txtblue-130 {
     color: var(--bgl-blue-130);
@@ -1924,6 +1989,11 @@
         color: var(--bgl-blue);
     }
 
+    .m_txt-primary-10,
+    .m_txtprimary-10 {
+        color: var(--bgl-primary-10);
+    }
+
     .m_txt-blue-10,
     .m_txtblue-10 {
         color: var(--bgl-blue-10);
@@ -1979,6 +2049,11 @@
         color: var(--bgl-pink-10);
     }
 
+    .m_txt-primary-20,
+    .m_txtprimary-20 {
+        color: var(--bgl-primary-20);
+    }
+
     .m_txt-blue-20,
     .m_txtblue-20 {
         color: var(--bgl-blue-20);
@@ -2034,6 +2109,11 @@
         color: var(--bgl-pink-20);
     }
 
+    .m_txt-primary-30,
+    .m_txtprimary-30 {
+        color: var(--bgl-primary-30);
+    }
+
     .m_txt-blue-30,
     .m_txtblue-30 {
         color: var(--bgl-blue-30);
@@ -2089,6 +2169,11 @@
         color: var(--bgl-pink-30);
     }
 
+    .m_txt-primary-40,
+    .m_txtprimary-40 {
+        color: var(--bgl-primary-40);
+    }
+
     .m_txt-blue-40,
     .m_txtblue-40 {
         color: var(--bgl-blue-40);
@@ -2144,6 +2229,11 @@
         color: var(--bgl-pink-40);
     }
 
+    .m_txt-primary-50,
+    .m_txtprimary-50 {
+        color: var(--bgl-primary-50);
+    }
+
     .m_txt-blue-50,
     .m_txtblue-50 {
         color: var(--bgl-blue-50);
@@ -2199,6 +2289,11 @@
         color: var(--bgl-pink-50);
     }
 
+    .m_txt-primary-60,
+    .m_txtprimary-60 {
+        color: var(--bgl-primary-60);
+    }
+
     .m_txt-blue-60,
     .m_txtblue-60 {
         color: var(--bgl-blue-60);
@@ -2254,6 +2349,11 @@
         color: var(--bgl-pink-60);
     }
 
+    .m_txt-primary-70,
+    .m_txtprimary-70 {
+        color: var(--bgl-primary-70);
+    }
+
     .m_txt-blue-70,
     .m_txtblue-70 {
         color: var(--bgl-blue-70);
@@ -2309,6 +2409,11 @@
         color: var(--bgl-pink-70);
     }
 
+    .m_txt-primary-80,
+    .m_txtprimary-80 {
+        color: var(--bgl-primary-80);
+    }
+
     .m_txt-blue-80,
     .m_txtblue-80 {
         color: var(--bgl-blue-80);
@@ -2364,6 +2469,11 @@
         color: var(--bgl-pink-80);
     }
 
+    .m_txt-primary-90,
+    .m_txtprimary-90 {
+        color: var(--bgl-primary-90);
+    }
+
     .m_txt-blue-90,
     .m_txtblue-90 {
         color: var(--bgl-blue-90);
@@ -2419,6 +2529,11 @@
         color: var(--bgl-pink-90);
     }
 
+    .m_txt-primary-100,
+    .m_txtprimary-100 {
+        color: var(--bgl-primary-100);
+    }
+
     .m_txt-blue-100,
     .m_txtblue-100 {
         color: var(--bgl-blue-100);
@@ -2474,6 +2589,11 @@
         color: var(--bgl-pink-100);
     }
 
+    .m_txt-primary-110,
+    .m_txtprimary-110 {
+        color: var(--bgl-primary-110);
+    }
+
     .m_txt-blue-110,
     .m_txtblue-110 {
         color: var(--bgl-blue-110);
@@ -2529,6 +2649,11 @@
         color: var(--bgl-pink-110);
     }
 
+    .m_txt-primary-120,
+    .m_txtprimary-120 {
+        color: var(--bgl-primary-120);
+    }
+
     .m_txt-blue-120,
     .m_txtblue-120 {
         color: var(--bgl-blue-120);
@@ -2584,6 +2709,11 @@
         color: var(--bgl-pink-120);
     }
 
+    .m_txt-primary-130,
+    .m_txtprimary-130 {
+        color: var(--bgl-primary-130);
+    }
+
     .m_txt-blue-130,
     .m_txtblue-130 {
         color: var(--bgl-blue-130);