@bagelink/vue 1.15.43 → 1.15.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.43",
+  "version": "1.15.47",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Spreadsheet/SpreadsheetTable.vue

@@ -96,7 +96,7 @@ function selectionEdgeClasses(rowIndex: number, localColIndex: number): Record<s
 	<table :class="{ 'fixed-columns': isFixed, 'w-100p': !isFixed }">
 		<thead class=" stickyTop">
 			<tr>
-				<th v-if="showRowNumbers" class="row-number-header bg-white" />
+				<th v-if="showRowNumbers" class="row-number-header" />
 				<th
 					v-for="col in columns"
 					:key="col.key"
@@ -215,7 +215,7 @@ border-collapse: collapse;
 th, td {
 padding: 0.1rem 0.5rem;
 min-width: 80px;
-background: var(--bgl-white);
+background: var(--bgl-box-bg);
 user-select: none;
 }
 
@@ -353,9 +353,9 @@ background: var(--bgl-primary);
 .empty-state {
 text-align: center;
 padding: 2rem 1rem;
-color: var(--txt-muted, #888);
+color: var(--bgl-label-color, #888);
 font-size: 0.875rem;
-background: var(--bgl-white);
+background: var(--bgl-box-bg);
 border: 1px solid var(--bgl-border-color);
 }
 

package/src/components/calendar/CalendarPopover.vue

@@ -78,9 +78,10 @@ position: fixed;
 z-index: 1000;
 min-width: 250px;
 max-width: 350px;
-background-color: white;
+background-color: var(--bgl-popup-bg);
+color: var(--bgl-popup-text);
 border-radius: var(--bgl-btn-border-radius);
-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+box-shadow: 0 2px 8px var(--bgl-shadow);
 animation: fadeIn 0.2s ease;
 transform-origin: center left;
 }

package/src/components/calendar/views/MonthView.vue

@@ -260,9 +260,10 @@ position: fixed;
 z-index: 1000;
 min-width: 250px;
 max-width: 350px;
-background-color: white;
+background-color: var(--bgl-popup-bg);
+color: var(--bgl-popup-text);
 border-radius: var(--bgl-btn-border-radius);
-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+box-shadow: 0 2px 8px var(--bgl-shadow);
 animation: fadeIn 0.2s ease;
 transform-origin: center left;
 }

package/src/components/form/inputs/ArrayInput.vue

@@ -187,10 +187,10 @@ function getItemRef(i: number) {
 						/>
 						<div v-else />
 					<Btn
-						full-width align-txt="start" class="px-025 bg-transparent color-inherit" :ripple="false"
+						full-width align-txt="start" class="px-025 bg-transparent color-inherit w-100p overflow-hidden" :ripple="false"
 						:icon="minimizedItems[i] ? 'expand_more' : 'expand_less'" @click="toggleItem(i)"
 					>
-						<div class="flex align-items-center gap-05">
+						<div class="flex align-items-center gap-05 w-100p overflow-hidden">
 							<img
 								v-if="getItemThumbnail(items[i])"
 								:src="pathKeyToURL(getItemThumbnail(items[i])!)"
@@ -202,8 +202,7 @@ function getItemRef(i: number) {
 							</p>
 						</div>
 					</Btn>
-
-						<Btn v-if="allowDelete" v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete" thin :confirm="resolveI18n('Are you sure you want to delete this item?')" @click="deleteItem(i)" />
+						<Btn v-if="allowDelete" v-tooltip="resolveI18n(deleteTooltip || 'Delete')" flat icon="delete" thin :confirm="resolveI18n('Are you sure you want to delete this item?')" @click="deleteItem(i)" icon-size="0.8" />
 					</div>
 					<Transition name="array-collapse">
 						<div v-if="!minimizedItems[i]" class="array-input-row grid align-items-center px-05">

package/src/components/form/inputs/RichText/index.vue

@@ -3912,10 +3912,11 @@ pointer-events: auto;
 }
 
 .context-menu-content {
-background: white;
+background: var(--bgl-popup-bg, white);
+color: var(--bgl-popup-text);
 border: 1px solid var(--bgl-border-color, #dddddd);
 border-radius: var(--bgl-btn-border-radius) !important;
-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+box-shadow: 0 2px 8px var(--bgl-shadow, rgba(0, 0, 0, 0.15));
 padding: 0;
 min-width: 140px;
 max-width: 180px;

package/src/styles/dark.css

@@ -1,92 +1,77 @@
-.bgl-dark-mode {
-  --bgl-primary: #1c4fe1;
-  --bgl-primary-tint: #1c4fe180;
-
-  /* --bgl-blue-tint: rgba(46, 91, 255, 20%); */
-  /* --bgl-blue-dark: #191c30; */
-  --bgl-blue-light: #34363b;
-  --bgl-black: #dbdcdc;
-  --bgl-black-tint: #7a7a7a;
-  --bgl-white: rgb(41, 42, 45);
-  --bgl-gray: #7f7d7d;
-  --bgl-gray-light: #191b1c;
-  --bgl-gray-80: #e8ecef;
-  --bgl-gray-20: rgba(183, 183, 183, 0.2);
-
-  --bgl-red: #9b403f;
-  --bgl-red-tint: #392828;
-
-  --bgl-green: #52875b;
-  --bgl-border-color: #383a3f;
-  --bgl-bg: #121317;
-  --bgl-shadow: #4c577d26;
-  --bgl-input-bg: #1d2023;
-  --bgl-input-color: #d3d4d4;
-  --bgl-label-color: #d3d4d480;
-  --bgl-placeholder-color: #ccd4dd60;
-
-  --bgl-hover-filter: brightness(130%);
+/* ============================================================================
+ * Dark Mode Theme  —  .bgl-dark-mode
+ * ----------------------------------------------------------------------------
+ * Activated by useTheme() which toggles the `.bgl-dark-mode` class on <html>.
+ *
+ * ARCHITECTURE (semantic, NOT inversion):
+ *   - We do NOT swap --bgl-black / --bgl-white. They keep their real meaning
+ *     (black = dark, white = light) so colored buttons (.pair-*) that use
+ *     `color: var(--bgl-white)` stay correct (light text on a colored fill).
+ *   - Instead we override only the SEMANTIC tokens (surfaces, text, borders)
+ *     with explicit dark values. Components that consume these tokens
+ *     (--bgl-bg, --bgl-box-bg, --bgl-text-color, …) become dark automatically.
+ *
+ * Single source of truth: the dark palette below (--bgl-dm-* raw values), which
+ * the semantic tokens reference. If you ever need explicit opt-in dark classes
+ * for components that use physical colors, build them on these same tokens.
+ * ============================================================================ */
+
+.bgl-dark-mode1 {
+  /* ---- Dark palette (raw values) ---------------------------------------- */
+  --bgl-dm-bg: #121317;
+  /* app background (deepest) */
+  --bgl-dm-surface: #1d2023;
+  /* cards, panels, inputs */
+  --bgl-dm-surface-2: #23262b;
+  /* slightly raised / hover */
+  --bgl-dm-text: #dbdcdc;
+  /* primary text */
+  --bgl-dm-text-muted: #9a9b9d;
+  /* secondary text */
+  --bgl-dm-border: #383a3f;
+  /* borders / dividers */
+
+  /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */
+  --bgl-primary: #4f7cff;
+  --bgl-primary-tint: #4f7cff33;
+  --bgl-primary-light: #1a2236;
+
+  /* ---- Surfaces / backgrounds ------------------------------------------ */
+  --bgl-bg: var(--bgl-dm-bg);
+  --bgl-box-bg: var(--bgl-dm-surface);
+  --bgl-popup-bg: var(--bgl-dm-surface);
+  --bgl-input-bg: var(--bgl-dm-surface);
+  --bgl-selected: var(--bgl-dm-surface-2);
+  --bgl-skeleton-bg: var(--bgl-dm-surface-2);
+  --bgl-skeleton-pulse: var(--bgl-dm-surface);
+  --bgl-gray-light: var(--bgl-dm-surface-2);
+
+  /* ---- Text ------------------------------------------------------------- */
+  --bgl-text-color: var(--bgl-dm-text);
+  --bgl-popup-text: var(--bgl-dm-text);
+  --bgl-input-color: var(--bgl-dm-text);
+  --bgl-dropdown-color: var(--bgl-dm-text);
+  --bgl-label-color: var(--bgl-dm-text-muted);
+  --bgl-placeholder-color: var(--bgl-dm-text-muted);
+
+  /* ---- Borders / shadows / scrollbar ----------------------------------- */
+  --bgl-border-color: var(--bgl-dm-border);
+  --bgl-shadow: rgba(0, 0, 0, 0.5);
+  --bgl-scrollbar-thumb: #4a4d52;
+
+  /* ---- Hover / active filters (lighten instead of darken) -------------- */
+  --bgl-hover-filter: brightness(125%);
   --bgl-active-filter: brightness(110%);
 }
 
-.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 */
-.bgl-dark-mode .nav {
-  color: var(--bgl-black) !important;
-  background: transparent;
-  border-radius: 0 !important;
-  border-inline-end: 1px solid var(--bgl-gray-tint);
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  margin-inline-start: 0 !important;
-}
-
-.bgl-dark-mode .nav * {
-  color: var(--bgl-black) !important;
-}
-
-.bgl-dark-mode .dropdown-project-head {
-  background: var(--bgl-bg) !important;
-  color: var(--bgl-white) !important;
-}
-
-.bgl-dark-mode .dropdown-project-body {
-  color: var(--bgl-black-tint) !important;
-}
-
-/* until here */
-
+/* Native form controls (date/time pickers) render dark glyphs that are
+   invisible on a dark input; invert them so they show up. */
 .bgl-dark-mode input::-webkit-calendar-picker-indicator {
-  filter: invert(48%);
+  filter: invert(0.8);
 }
 
+/* Text selection */
 .bgl-dark-mode ::selection {
-  color: var(--bgl-black);
+  color: var(--bgl-dm-text);
   background: var(--bgl-primary-tint);
-}
-
-.bgl-dark-mode .whatsapp-msg {
-  color: var(--bgl-gray-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);
-}
-
-.bgl-dark-mode .bagel-input.checkbox.check .slider:before {
-  color: var(--bgl-black) !important;
-}
-
-.bgl-dark-mode .nav-expend {
-  top: 67px;
 }