@bagelink/vue 1.14.13 → 1.15.0

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;

package/src/styles/dark.css

@@ -1,4 +1,4 @@
-[theme="dark"] {
+.bgl-dark-mode {
   --bgl-primary: #1c4fe1;
   --bgl-primary-tint: #1c4fe180;
 
@@ -12,34 +12,33 @@
   --bgl-gray-light: #191b1c;
   --bgl-gray-80: #e8ecef;
   --bgl-gray-20: rgba(183, 183, 183, 0.2);
-  --bgl-pink: #f1416c;
+
   --bgl-red: #9b403f;
   --bgl-red-tint: #392828;
-  --bgl-yellow: #ffbb00;
-  --bgl-yellow-light: #fff6d5;
+
   --bgl-green: #52875b;
-  --border-color: #383a3f;
+  --bgl-border-color: #383a3f;
   --bgl-bg: #121317;
   --bgl-shadow: #4c577d26;
-  --input-bg: #1d2023;
-  --input-color: #d3d4d4;
-  --label-color: #d3d4d480;
-  --placeholder-color: #ccd4dd60;
+  --bgl-input-bg: #1d2023;
+  --bgl-input-color: #d3d4d4;
+  --bgl-label-color: #d3d4d480;
+  --bgl-placeholder-color: #ccd4dd60;
 
   --bgl-hover-filter: brightness(130%);
   --bgl-active-filter: brightness(110%);
 }
 
-[theme="dark"] .input.active,
-[theme="dark"] .bagel-input input:focus-visible,
-[theme="dark"] .bagel-input select:focus-visible,
-[theme="dark"] .bagel-input textarea:focus-visible {
+.bgl-dark-mode .input.active,
+.bgl-dark-mode .bagel-input input:focus-visible,
+.bgl-dark-mode .bagel-input select:focus-visible,
+.bgl-dark-mode .bagel-input textarea:focus-visible {
   outline: none;
   box-shadow: inset 0 0 10px var(--bgl-bg);
 }
 
 /* use this is to override the nav color */
-[theme="dark"] .nav {
+.bgl-dark-mode .nav {
   color: var(--bgl-black) !important;
   background: transparent;
   border-radius: 0 !important;
@@ -49,45 +48,45 @@
   margin-inline-start: 0 !important;
 }
 
-[theme="dark"] .nav * {
+.bgl-dark-mode .nav * {
   color: var(--bgl-black) !important;
 }
 
-[theme="dark"] .dropdown-project-head {
+.bgl-dark-mode .dropdown-project-head {
   background: var(--bgl-bg) !important;
   color: var(--bgl-white) !important;
 }
 
-[theme="dark"] .dropdown-project-body {
+.bgl-dark-mode .dropdown-project-body {
   color: var(--bgl-black-tint) !important;
 }
 
 /* until here */
 
-[theme="dark"] input::-webkit-calendar-picker-indicator {
+.bgl-dark-mode input::-webkit-calendar-picker-indicator {
   filter: invert(48%);
 }
 
-[theme="dark"] ::selection {
+.bgl-dark-mode ::selection {
   color: var(--bgl-black);
   background: var(--bgl-primary-tint);
 }
 
-[theme="dark"] .whatsapp-msg {
+.bgl-dark-mode .whatsapp-msg {
   color: var(--bgl-gray-light);
 }
 
-[theme="dark"] .bgl_btn,
-[theme="dark"] .bgl_btn-icon,
-[theme="dark"] .primary-checkbox input:checked+span,
-[theme="dark"] .bgl_btn.light {
+.bgl-dark-mode .bgl_btn,
+.bgl-dark-mode .bgl_btn-icon,
+.bgl-dark-mode .primary-checkbox input:checked+span,
+.bgl-dark-mode .bgl_btn.light {
   color: var(--bgl-black);
 }
 
-[theme="dark"] .bagel-input.checkbox.check .slider:before {
+.bgl-dark-mode .bagel-input.checkbox.check .slider:before {
   color: var(--bgl-black) !important;
 }
 
-[theme="dark"] .nav-expend {
+.bgl-dark-mode .nav-expend {
   top: 67px;
 }

package/src/styles/input-variants.css

@@ -21,8 +21,8 @@
 	position: absolute;
 	top: 0.75rem;
 	inset-inline-start: 0.25rem;
-	font-size: var(--input-font-size);
-	color: var(--placeholder-color);
+	font-size: var(--bgl-input-font-size);
+	color: var(--bgl-placeholder-color);
 	pointer-events: none;
 	transition:
 		top 0.2s ease,
@@ -43,23 +43,23 @@
 
 /* Adjust label position when there's a start icon */
 .bagel-input.underlined.txtInputIconStart .label-text {
-	inset-inline-start: calc(var(--input-height) / 3 + 1.25rem);
+	inset-inline-start: calc(var(--bgl-input-height) / 3 + 1.25rem);
 }
 
 /* Adjust label position for DateInput with internal iconStart */
 .bagel-input.underlined:has(.txtInputIconStart) .label-text {
-	inset-inline-start: calc(var(--input-height) / 3 + 1.25rem);
+	inset-inline-start: calc(var(--bgl-input-height) / 3 + 1.25rem);
 }
 
 /* Adjust input padding when there's a start icon in underlined mode */
 .bagel-input.underlined.txtInputIconStart input,
 .bagel-input.underlined.txtInputIconStart textarea {
-	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem) !important;
+	padding-inline-start: calc(var(--bgl-input-height) / 3 + 1.5rem) !important;
 }
 
 /* Adjust icon position in underlined mode */
 .bagel-input.underlined.txtInputIconStart .iconStart {
-	margin-top: calc(var(--input-height) / 2 + 0.16rem);
+	margin-top: calc(var(--bgl-input-height) / 2 + 0.16rem);
 }
 
 /* float up: has value */
@@ -88,7 +88,7 @@
 	background: transparent !important;
 	border-radius: 0 !important;
 	border: none !important;
-	border-bottom: 1.5px solid var(--border-color) !important;
+	border-bottom: 1.5px solid var(--bgl-border-color) !important;
 	padding-inline: 0.25rem !important;
 }
 
@@ -117,8 +117,8 @@
 
 /* multiline textarea: full border, label stays inside */
 .bagel-input.underlined textarea {
-	border: 1.5px solid var(--border-color) !important;
-	border-radius: var(--input-border-radius) !important;
+	border: 1.5px solid var(--bgl-border-color) !important;
+	border-radius: var(--bgl-input-border-radius) !important;
 	padding: 0.9rem !important;
 	padding-top: 1.4rem !important;
 	background-image: none !important;
@@ -171,7 +171,7 @@
 	background: transparent !important;
 	border-radius: 0 !important;
 	border: none !important;
-	border-bottom: 1.5px solid var(--border-color) !important;
+	border-bottom: 1.5px solid var(--bgl-border-color) !important;
 	padding-inline: 0.25rem !important;
 }
 
@@ -181,5 +181,5 @@
 }
 
 .bagel-input.underlined .date-input.txtInputIconStart input {
-	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem) !important;
+	padding-inline-start: calc(var(--bgl-input-height) / 3 + 1.5rem) !important;
 }