@bagelink/vue 1.14.13 → 1.14.15

package/src/styles/appearance.css

@@ -162,26 +162,26 @@
 }
 
 .border-bottom {
-    border-bottom: 1px solid var(--border-color)
+    border-bottom: 1px solid var(--bgl-border-color)
 }
 
 .border-top {
-    border-top: 1px solid var(--border-color)
+    border-top: 1px solid var(--bgl-border-color)
 }
 
 .border-start {
-    border-inline-start: 1px solid var(--border-color)
+    border-inline-start: 1px solid var(--bgl-border-color)
 }
 
 .border-end {
-    border-inline-end: 1px solid var(--border-color)
+    border-inline-end: 1px solid var(--bgl-border-color)
 }
 
 .border-input input,
 .border-input textarea,
 .border-input select,
 .border-input button {
-    border: 1px solid var(--border-color) !important;
+    border: 1px solid var(--bgl-border-color) !important;
 }
 
 .border-input-none input,
@@ -192,19 +192,19 @@
 }
 
 .border-inner-bottom>* {
-    border-bottom: 1px solid var(--border-color)
+    border-bottom: 1px solid var(--bgl-border-color)
 }
 
 .border-inner-top>* {
-    border-top: 1px solid var(--border-color)
+    border-top: 1px solid var(--bgl-border-color)
 }
 
 .border-inner-start>* {
-    border-inline-start: 1px solid var(--border-color)
+    border-inline-start: 1px solid var(--bgl-border-color)
 }
 
 .border-inner-end>* {
-    border-inline-end: 1px solid var(--border-color)
+    border-inline-end: 1px solid var(--bgl-border-color)
 }
 
 .border-bottom-none {
@@ -485,19 +485,19 @@
     }
 
     .m_border-bottom {
-        border-bottom: 1px solid var(--border-color)
+        border-bottom: 1px solid var(--bgl-border-color)
     }
 
     .m_border-top {
-        border-top: 1px solid var(--border-color)
+        border-top: 1px solid var(--bgl-border-color)
     }
 
     .m_border-start {
-        border-inline-start: 1px solid var(--border-color)
+        border-inline-start: 1px solid var(--bgl-border-color)
     }
 
     .m_border-end {
-        border-inline-end: 1px solid var(--border-color)
+        border-inline-end: 1px solid var(--bgl-border-color)
     }
 
     .m_border-none {
@@ -509,19 +509,19 @@
     }
 
     .m_border-inner-bottom>* {
-        border-bottom: 1px solid var(--border-color)
+        border-bottom: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-top>* {
-        border-top: 1px solid var(--border-color)
+        border-top: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-start>* {
-        border-inline-start: 1px solid var(--border-color)
+        border-inline-start: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-end>* {
-        border-inline-end: 1px solid var(--border-color)
+        border-inline-end: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-none>* {
@@ -586,9 +586,7 @@
         box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
     }
 
-    .m_shadow-light {
-        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
-    }
+    /* .m_shadow-light already defined above (line 478) */
 
     .m_shadow-txt {
         filter: drop-shadow(0 0 10px var(--bgl-black-tint));
@@ -647,7 +645,7 @@
     .m_border-input textarea,
     .m_border-input select,
     .m_border-input button {
-        border: 1px solid var(--border-color) !important;
+        border: 1px solid var(--bgl-border-color) !important;
     }
 
     .m_border-input-none input,
@@ -657,4 +655,164 @@
         border: none !important;
     }
 
+}
+
+/* ========================================================================
+   Utility gap fills (June 2026)
+   ======================================================================== */
+
+/* Letter Spacing / Tracking */
+.tracking-tighter {
+    letter-spacing: -0.05em !important;
+}
+
+.tracking-tight {
+    letter-spacing: -0.025em !important;
+}
+
+.tracking-normal {
+    letter-spacing: 0 !important;
+}
+
+.tracking-wide {
+    letter-spacing: 0.025em !important;
+}
+
+.tracking-wider {
+    letter-spacing: 0.05em !important;
+}
+
+.tracking-widest {
+    letter-spacing: 0.1em !important;
+}
+
+/* Filter */
+.blur-none {
+    filter: blur(0) !important;
+}
+
+.blur-sm {
+    filter: blur(4px) !important;
+}
+
+.blur {
+    filter: blur(8px) !important;
+}
+
+.blur-md {
+    filter: blur(12px) !important;
+}
+
+.blur-lg {
+    filter: blur(16px) !important;
+}
+
+.blur-xl {
+    filter: blur(24px) !important;
+}
+
+.brightness-50 {
+    filter: brightness(50%) !important;
+}
+
+.brightness-75 {
+    filter: brightness(75%) !important;
+}
+
+.brightness-90 {
+    filter: brightness(90%) !important;
+}
+
+.brightness-110 {
+    filter: brightness(110%) !important;
+}
+
+.brightness-125 {
+    filter: brightness(125%) !important;
+}
+
+.brightness-150 {
+    filter: brightness(150%) !important;
+}
+
+.grayscale {
+    filter: grayscale(100%) !important;
+}
+
+.grayscale-0 {
+    filter: grayscale(0) !important;
+}
+
+.invert {
+    filter: invert(100%) !important;
+}
+
+.invert-0 {
+    filter: invert(0) !important;
+}
+
+.saturate-0 {
+    filter: saturate(0) !important;
+}
+
+.saturate-50 {
+    filter: saturate(50%) !important;
+}
+
+.saturate-150 {
+    filter: saturate(150%) !important;
+}
+
+.saturate-200 {
+    filter: saturate(200%) !important;
+}
+
+/* Backdrop Filter */
+.backdrop-blur-none {
+    backdrop-filter: blur(0) !important;
+}
+
+.backdrop-blur-sm {
+    backdrop-filter: blur(4px) !important;
+}
+
+.backdrop-blur {
+    backdrop-filter: blur(8px) !important;
+}
+
+.backdrop-blur-md {
+    backdrop-filter: blur(12px) !important;
+}
+
+.backdrop-blur-lg {
+    backdrop-filter: blur(16px) !important;
+}
+
+.backdrop-blur-xl {
+    backdrop-filter: blur(24px) !important;
+}
+
+/* Gradients */
+.bg-gradient-to-t {
+    background-image: linear-gradient(to top, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-b {
+    background-image: linear-gradient(to bottom, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-r {
+    background-image: linear-gradient(to right, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-l {
+    background-image: linear-gradient(to left, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-tr {
+    background-image: linear-gradient(to top right, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-bl {
+    background-image: linear-gradient(to bottom left, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
 }

package/src/styles/bagel.css

@@ -1,112 +1,118 @@
-@import "base-colors.css";
-@import "layout.css";
-@import "mobilLayout.css";
-@import "inputs.css";
-@import "input-variants.css";
-@import "buttons.css";
-@import "text.css";
-@import "scrollbar.css";
-@import "transitions.css";
-@import "loginCard.css";
-@import "colors.css";
-@import "mobileColors.css";
-@import "appearance.css";
-@import "theme.css";
-@import "dark.css";
-@import "./fonts/Ploni.css";
-
-:root {
-    --transition: all 0.2s cubic-bezier(0.1, 0.5, 0.33, 1);
-    --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
-}
-
-.grid>* {
-    min-height: 0;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-
-html {
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    height: 100%;
-    background-attachment: scroll;
-}
-
-body {
-    margin: 0;
-    min-height: 100%;
-    background-color: var(--bgl-bg);
-    font-family: var(--bgl-font);
-    font-size: var(--bgl-font-size);
-    font-weight: 400;
-    line-height: 1.65;
-    width: auto;
-    height: auto;
-    color: var(--bgl-text-color);
-}
+/* Layer order declaration — later layers win in the cascade */
+@layer bgl-reset, bgl-tokens, bgl-base, bgl-components, bgl-utilities;
+
+/* Tokens */
+@import "theme.css" layer(bgl-tokens);
+@import "dark.css" layer(bgl-tokens);
+@import "./fonts/Ploni.css" layer(bgl-tokens);
+
+/* Base / component styles */
+@import "inputs.css" layer(bgl-base);
+@import "input-variants.css" layer(bgl-base);
+@import "buttons.css" layer(bgl-base);
+@import "scrollbar.css" layer(bgl-base);
+@import "transitions.css" layer(bgl-base);
+@import "loginCard.css" layer(bgl-components);
+@import "app-layout.css" layer(bgl-components);
+
+/* Utilities */
+@import "base-colors.css" layer(bgl-utilities);
+@import "layout.css" layer(bgl-utilities);
+@import "mobilLayout.css" layer(bgl-utilities);
+@import "text.css" layer(bgl-utilities);
+@import "colors.css" layer(bgl-utilities);
+@import "mobileColors.css" layer(bgl-utilities);
+@import "appearance.css" layer(bgl-utilities);
+
+/* Reset layer — lowest priority */
+@layer bgl-reset {
+    :root {
+        --bgl-transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
+        --bgl-transition-ease-in: cubic-bezier(0.1, 0.5, 0.33, 1);
+    }
 
-a {
-    background-color: transparent;
-    cursor: pointer;
-    display: inline-block;
-    color: inherit;
-}
+    .grid>* {
+        min-height: 0;
+    }
 
-a:active,
-a:hover {
-    outline: 0;
-}
+    * {
+        box-sizing: border-box;
+    }
 
-b,
-strong {
-    font-weight: bold;
-}
+    html {
+        text-size-adjust: 100%;
+        height: 100%;
+        background-attachment: scroll;
+    }
 
-hr {
-    box-sizing: content-box;
-}
+    body {
+        margin: 0;
+        min-height: 100%;
+        background-color: var(--bgl-bg);
+        font-family: var(--bgl-font);
+        font-size: var(--bgl-font-size);
+        font-weight: 400;
+        line-height: 1.65;
+        width: auto;
+        height: auto;
+        color: var(--bgl-text-color);
+    }
 
-img,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-    max-width: 100%;
-    vertical-align: middle;
-    border: 0;
-}
+    a {
+        background-color: transparent;
+        cursor: pointer;
+        display: inline-block;
+        color: inherit;
+    }
 
-input,
-button,
-textarea,
-select {
-    font: inherit;
-}
+    a:active,
+    a:hover {
+        outline: 0;
+    }
 
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
+    b,
+    strong {
+        font-weight: bold;
+    }
 
+    hr {
+        box-sizing: content-box;
+    }
 
-@media screen and (max-width: 910px) {
+    img,
+    video,
+    canvas,
+    audio,
+    iframe,
+    embed,
+    object {
+        max-width: 100%;
+        vertical-align: middle;
+        border: 0;
+    }
 
-    body {
-        min-height: 100vh;
-        min-height: -webkit-fill-available;
-        height: -webkit-fill-available;
+    input,
+    button,
+    textarea,
+    select {
+        font: inherit;
+    }
 
+    button::-moz-focus-inner,
+    input::-moz-focus-inner {
+        border: 0;
+        padding: 0;
     }
 
-    html {
-        height: -webkit-fill-available;
+    @media screen and (max-width: 910px) {
+        body {
+            min-height: 100vh;
+            min-height: -webkit-fill-available;
+            height: -webkit-fill-available;
+        }
 
+        html {
+            height: -webkit-fill-available;
+        }
     }
-}
+}

package/src/styles/buttons.css

@@ -8,11 +8,11 @@
     user-select: none;
     border: none;
     transition: var(--bgl-transition);
-    border-radius: var(--btn-border-radius);
-    line-height: var(--btn-height);
-    font-size: var(--input-font-size);
+    border-radius: var(--bgl-btn-border-radius);
+    line-height: var(--bgl-btn-height);
+    font-size: var(--bgl-input-font-size);
     display: inline-block;
-    height: var(--btn-height);
+    height: var(--bgl-btn-height);
     padding: 0;
 }
 
@@ -86,15 +86,15 @@
 }
 
 .border {
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--bgl-border-color);
 }
 
 .outline {
-    outline: 1px solid var(--border-color);
+    outline: 1px solid var(--bgl-border-color);
 }
 
 .outline-dashed {
-    outline: 2px dashed var(--border-color);
+    outline: 2px dashed var(--bgl-border-color);
 }
 
 .outline-primary {
@@ -131,7 +131,7 @@
     }
 
     .m_border {
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--bgl-border-color);
     }
 
     .m_rotate-270 {

package/src/styles/colors.css

@@ -4558,109 +4558,6 @@
     color: var(--bgl-primary-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;