@bagelink/vue 1.12.36 → 1.12.42

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

@@ -1,15 +1,27 @@
 body>div ::-webkit-scrollbar {
     width: var(--bgl-scrollbar-size);
     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 {
     background: transparent;
+}
+
+.bgl-scrollbar-bordered::-webkit-scrollbar-track,
+.scrollbar-border::-webkit-scrollbar-track {
+    margin-block: 0 !important;
+    border-inline-start: 1px solid rgba(0, 0, 0, .08) !important;
 }