@bagelink/vue 1.14.13 → 1.14.15

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;
 }

package/src/styles/inputs.css

@@ -22,27 +22,27 @@ select {
 }
 
 .bagel-input::-webkit-input-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input::-moz-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input:-ms-input-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input::-ms-input-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input::placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input {
-    --bgl-input-label-color: var(--label-color);
+    --bgl-input-label-color: var(--bgl-label-color);
     --bgl-input-label-active-color: var(--bgl-primary);
 }
 
@@ -62,20 +62,20 @@ select {
 .bagel-input input,
 .bagel-input select,
 .custom-select .input {
-    height: var(--input-height);
-    font-size: var(--input-font-size);
+    height: var(--bgl-input-height);
+    font-size: var(--bgl-input-font-size);
 }
 
 .bagel-input input,
 .bagel-input textarea,
 .bagel-input select,
 .custom-select .input {
-    background: var(--input-bg);
+    background: var(--bgl-input-bg);
     border: none;
     padding: 0.7rem;
-    border-radius: var(--input-border-radius);
-    color: var(--input-color);
-    min-width: calc(var(--input-height) * 3);
+    border-radius: var(--bgl-input-border-radius);
+    color: var(--bgl-input-color);
+    min-width: calc(var(--bgl-input-height) * 3);
     width: 100%;
 }
 
@@ -103,7 +103,7 @@ select {
 .bagel-input.frame select,
 .custom-select.frame .input {
     background: transparent;
-    outline: 1.5px solid var(--border-color);
+    outline: 1.5px solid var(--bgl-border-color);
     outline-offset: -1px;
     transition:
         outline-color 0.2s ease,
@@ -139,7 +139,7 @@ select {
 .bagel-input.bgl-outline textarea,
 .bagel-input.bgl-outline select,
 .custom-select.bgl-outline .input {
-    outline: 1.5px solid var(--border-color);
+    outline: 1.5px solid var(--bgl-border-color);
     outline-offset: -1px;
 }
 
@@ -147,35 +147,35 @@ select {
 .bagel-input textarea::-webkit-input-placeholder,
 .bagel-input select::-webkit-input-placeholder,
 .custom-select .input::-webkit-input-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input input::-moz-placeholder,
 .bagel-input textarea::-moz-placeholder,
 .bagel-input select::-moz-placeholder,
 .custom-select .input::-moz-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input input:-ms-input-placeholder,
 .bagel-input textarea:-ms-input-placeholder,
 .bagel-input select:-ms-input-placeholder,
 .custom-select .input:-ms-input-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input input::-ms-input-placeholder,
 .bagel-input textarea::-ms-input-placeholder,
 .bagel-input select::-ms-input-placeholder,
 .custom-select .input::-ms-input-placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input input::placeholder,
 .bagel-input textarea::placeholder,
 .bagel-input select::placeholder,
 .custom-select .input::placeholder {
-    color: var(--placeholder-color);
+    color: var(--bgl-placeholder-color);
 }
 
 .bagel-input.search-wrap {
@@ -195,12 +195,12 @@ select {
 }
 
 .bagel-input select {
-    height: var(--input-height);
+    height: var(--bgl-input-height);
 }
 
 .bagel-input textarea {
     resize: vertical;
-    min-height: calc(var(--input-height) * 3);
+    min-height: calc(var(--bgl-input-height) * 3);
     line-height: 1.5;
 }
 
@@ -232,7 +232,7 @@ select {
 
 .bagel-input.frame .selectinput-btn {
     background: transparent;
-    outline: 1.5px solid var(--border-color);
+    outline: 1.5px solid var(--bgl-border-color);
     outline-offset: -1px;
     transition:
         outline-color 0.2s ease,
@@ -249,9 +249,9 @@ select {
 
 .bagel-input.frame.bgl_input.signature-pad .canvas,
 .bagel-input.frame .signature-pad-canvas-wrap .canvas {
-    outline: 1.5px solid var(--border-color);
+    outline: 1.5px solid var(--bgl-border-color);
     outline-offset: -1px;
-    border-radius: var(--input-border-radius);
+    border-radius: var(--bgl-input-border-radius);
     transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -262,17 +262,17 @@ select {
 }
 
 .bagel-input.bgl-outline.bgl_input.signature-pad .canvas {
-    outline: 1.5px solid var(--border-color);
+    outline: 1.5px solid var(--bgl-border-color);
     outline-offset: -1px;
-    border-radius: var(--input-border-radius);
+    border-radius: var(--bgl-input-border-radius);
 }
 
 /* colorInputPickWrap variants handled in ColorInput.vue */
 
 .bagel-input.frame .code-editor-grandpa {
-    outline: 1.5px solid var(--border-color);
+    outline: 1.5px solid var(--bgl-border-color);
     outline-offset: -1px;
-    border-radius: var(--input-border-radius);
+    border-radius: var(--bgl-input-border-radius);
 }
 
 .bagel-input.frame:focus-within .code-editor-grandpa {
@@ -280,10 +280,10 @@ select {
 }
 
 .bagel-input.frame .rich-text-editor {
-    outline: 1.5px solid var(--border-color);
+    outline: 1.5px solid var(--bgl-border-color);
     outline-offset: -1px;
     border: none;
-    border-radius: var(--input-border-radius);
+    border-radius: var(--bgl-input-border-radius);
     transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -315,31 +315,18 @@ select {
 }
 
 .bg-input {
-    background: var(--input-bg);
+    background: var(--bgl-input-bg);
 }
 
-.custom-select .input {
-    height: var(--input-height);
-    font-size: var(--input-font-size);
-}
-
-.custom-select .input {
-    background: var(--input-bg);
-    border: none;
-    padding: 0.7rem;
-    border-radius: var(--input-border-radius);
-    color: var(--input-color);
-    min-width: calc(var(--input-height) * 3);
-    width: 100%;
-}
+/* .custom-select .input styles consolidated with .bagel-input rules above (lines 62–80) */
 
 .input-height {
-    height: var(--input-height);
+    height: var(--bgl-input-height);
 }
 
 .input-size {
-    height: var(--input-height);
-    min-width: calc(var(--input-height) * 3);
+    height: var(--bgl-input-height);
+    min-width: calc(var(--bgl-input-height) * 3);
     margin-bottom: 0.5rem;
     padding: 0.7rem;
 }
@@ -364,14 +351,14 @@ select {
 .bagel-input textarea:focus {
     outline-color: rgba(0, 0, 0, 0.05);
     box-shadow: inset 0 0 8px #00000018;
-    outline-color: var(--input-bg);
+    outline-color: var(--bgl-input-bg);
 }
 
 
 .bagel-input .bgl_btn:focus,
 .bagel-input button:focus {
     outline-color: rgba(0, 0, 0, 0.05);
-    outline-color: var(--input-bg);
+    outline-color: var(--bgl-input-bg);
 }
 
 /* ─── Variant: light-input ────────────────────────────────────────────────── */
@@ -385,7 +372,7 @@ select {
     box-shadow:
         0 1px 5px 0 rgba(0, 0, 0, 0.1),
         0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
-    outline: 1px solid var(--border-color) !important;
+    outline: 1px solid var(--bgl-border-color) !important;
     transition:
         box-shadow 0.2s ease,
         outline-color 0.2s ease;
@@ -422,19 +409,16 @@ select {
     padding: 0;
     display: block;
     border: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     cursor: pointer;
-    height: calc(var(--input-height) - 0.5rem);
-    width: calc(var(--input-height) - 0.5em);
-    min-width: calc(var(--input-height) - 0.5rem);
+    height: calc(var(--bgl-input-height) - 0.5rem);
+    width: calc(var(--bgl-input-height) - 0.5em);
+    min-width: calc(var(--bgl-input-height) - 0.5rem);
 }
 
 .bagel-input input[type='color']::-webkit-color-swatch {
-    border-radius: var(--input-border-radius);
+    border-radius: var(--bgl-input-border-radius);
     border: none;
-    -webkit-transition: box-shadow 200ms ease;
     transition: box-shadow 200ms ease;
 }
 
@@ -443,9 +427,8 @@ select {
 }
 
 .bagel-input input[type='color']::-moz-color-swatch {
-    border-radius: var(--input-border-radius);
+    border-radius: var(--bgl-input-border-radius);
     border: none;
-    -moz-transition: box-shadow 200ms ease;
     transition: box-shadow 200ms ease;
 }