@bagelink/vue 1.15.549 → 1.15.551

package/package.json

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

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

@@ -3621,7 +3621,7 @@ const imgTransform = computed({
 
 <template>
 	<div
-		class="bagel-input" :class="[shellClass, { 'has-value': hasEditorValue, 'rich-text-full-height': fullHeight }]" :style="shellStyle"
+		class="bagel-input rich-text-light-theme" :class="[shellClass, { 'has-value': hasEditorValue, 'rich-text-full-height': fullHeight }]" :style="shellStyle"
 		v-bind="attrs"
 	>
 		<label v-if="label">{{ label }}</label>
@@ -4205,14 +4205,43 @@ line-height: 1.65;
 font-size: var(--richtext-font-size, 16px);
 }
 
-/* Dark mode: keep the editing surface light (a slightly-dimmed off-white)
-   instead of the deep dark surface, so the dark editor text stays readable.
-   The iframe body itself is transparent, so this `.content-area` background is
-   what shows behind the text. The iframe's own text color is forced dark in JS
-   (editorStylesContent) when `.bgl-dark-mode` is active. */
-.bgl-dark-mode .content-area,
-.bgl-dark-mode .rich-text-editor--basic .content-area {
-background: #ececec !important;
+/* RichText is deliberately a light-theme island. Re-declare every semantic
+   token changed by dark mode at the component boundary, so the editor chrome,
+   controls, menus and editing surface render exactly as they do in light mode. */
+.rich-text-light-theme {
+color-scheme: light;
+--bgl-box-bg: #fff;
+--bgl-popup-bg: #fff;
+--bgl-popup-text: #282929;
+--bgl-input-bg: #f5f8fa;
+--bgl-input-color: #000;
+--bgl-dropdown-color: #282929;
+--bgl-text-color: #282929;
+--bgl-richtext-color: #fff;
+--bgl-border-color: #00000020;
+--bgl-placeholder-color: #00000040;
+--bgl-label-color: #00000080;
+--bgl-gray-light: #f5f8fa;
+--bgl-gray: #b7b7b7;
+--bgl-shadow: #00000031;
+--bgl-hover-filter: brightness(90%);
+--bgl-active-filter: brightness(70%);
+}
+
+.bgl-dark-mode .rich-text-light-theme .pair-black.bgl_flatPill,
+.bgl-dark-mode .rich-text-light-theme .pair-black.bgl_pill-border {
+color: var(--bgl-black);
+}
+
+.bgl-dark-mode .rich-text-light-theme .bg-white:not(.keep-white) {
+background: #fff !important;
+color: #282929;
+}
+
+.bgl-dark-mode .rich-text-light-theme input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
+.bgl-dark-mode .rich-text-light-theme textarea,
+.bgl-dark-mode .rich-text-light-theme select {
+box-shadow: none;
 }
 
 </style>

package/src/composables/useTheme.ts

@@ -55,6 +55,24 @@ const manualSelection = ref(false)
 
 const isBrowser = typeof window !== 'undefined'
 
+function readStoredTheme() {
+	if (!isBrowser) return null
+	try {
+		return window.localStorage.getItem(STORAGE_KEY)
+	} catch {
+		return null
+	}
+}
+
+function storeTheme(value: string) {
+	if (!isBrowser) return
+	try {
+		window.localStorage.setItem(STORAGE_KEY, value)
+	} catch {
+		// Storage can be unavailable in privacy-restricted or embedded contexts.
+	}
+}
+
 function getSystemPrefersDark() {
 	return allowDark.value && isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 }
@@ -123,6 +141,7 @@ function toggleTheme() {
  *                                    fall back to "system" when they haven't picked one.
  */
 export function configureTheme(options: { allowDark?: boolean, manualSelection?: boolean } = {}) {
+	const manualSelectionWasEnabled = manualSelection.value
 	if (options.allowDark !== undefined) {
 		allowDark.value = options.allowDark
 	}
@@ -136,6 +155,16 @@ export function configureTheme(options: { allowDark?: boolean, manualSelection?:
 	// wouldn't react until something mounted, forcing a refresh.
 	initTheme()
 
+	// Configuration may legitimately run after an imported component called
+	// useTheme(). Restore the saved manual choice when manual selection becomes
+	// enabled so initialization order cannot silently discard the preference.
+	if (manualSelection.value && !manualSelectionWasEnabled) {
+		const saved = readStoredTheme()
+		if (themeOptions.value.some(t => t.value === saved)) {
+			colorMode.value = saved!
+		}
+	}
+
 	// When the project has no manual switcher, force "system" — even if initTheme()
 	// already ran earlier (via useTheme) and restored a stale saved value before
 	// this config was known.
@@ -187,7 +216,7 @@ function initTheme() {
 	// Only restore a saved manual choice when the project allows manual selection.
 	// Otherwise always follow the OS, so the app can't get stuck on a stale value.
 	if (manualSelection.value) {
-		const saved = window.localStorage.getItem(STORAGE_KEY)
+		const saved = readStoredTheme()
 		if (themeOptions.value.some(t => t.value === saved)) {
 			colorMode.value = saved!
 		}
@@ -207,7 +236,7 @@ function initTheme() {
 	// Persist + apply on mode changes (persist only matters for manual selection)
 	watch(colorMode, (newMode) => {
 		if (manualSelection.value) {
-			localStorage.setItem(STORAGE_KEY, newMode)
+			storeTheme(newMode)
 		}
 		applyTheme(newMode)
 	})

package/src/styles/dark.css

@@ -2,6 +2,14 @@
    Semantic, not inversion: override only the semantic tokens (surfaces, text,
    borders) with dark values; --bgl-black/--bgl-white keep their real meaning. */
 
+:root.bgl-light-mode {
+  color-scheme: light;
+}
+
+:root.bgl-dark-mode {
+  color-scheme: dark;
+}
+
 /* `:root.bgl-dark-mode` raises specificity to (0,2,0) so these tokens win over a
    project's own `:root {}`; bare `.bgl-dark-mode` is a non-root fallback. */
 :root.bgl-dark-mode,