@bagelink/vue 1.15.55 → 1.15.59

package/package.json

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

package/src/composables/index.ts

@@ -36,5 +36,5 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 	return getFallbackSchema(data, _columns.value)
 }
 
-export { useTheme } from './useTheme'
+export { configureTheme, useTheme } from './useTheme'
 export { useValidateFieldValue } from './useValidateFieldValue'

package/src/composables/useTheme.ts

@@ -37,10 +37,18 @@ const STORAGE_KEY = 'color-mode'
 const colorMode = ref<string>('system')
 const isDark = ref(false)
 
+/**
+ * Whether dark mode is enabled for this app. Defaults to `false` (light only),
+ * so dark mode is opt-in per project. Call `configureTheme({ allowDark: true })`
+ * once at app startup to enable it. When `false`, any dark/system-dark
+ * preference falls back to light and `bgl-dark-mode` is never applied.
+ */
+const allowDark = ref(false)
+
 const isBrowser = typeof window !== 'undefined'
 
 function getSystemPrefersDark() {
-	return isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+	return allowDark.value && isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
 }
 
 function findTheme(value: string) {
@@ -69,11 +77,15 @@ function applyTheme(themeValue: string) {
 			root.classList.add(themeToApply.class)
 		}
 	} else {
-		// Apply the selected theme
+		// Apply the selected theme. If dark mode is disabled for this app, force
+		// any dark selection back to light so projects can opt out entirely.
 		const theme = findTheme(themeValue)
-		if (theme) {
-			root.classList.add(theme.class)
-			isDark.value = theme.isDark ?? false
+		const effectiveTheme = theme && theme.isDark && !allowDark.value
+			? findTheme('light')
+			: theme
+		if (effectiveTheme) {
+			root.classList.add(effectiveTheme.class)
+			isDark.value = effectiveTheme.isDark ?? false
 		}
 	}
 }
@@ -89,6 +101,20 @@ function toggleTheme() {
 	colorMode.value = cyclableThemes[nextIndex].value
 }
 
+/**
+ * Configure theme behavior for the current app. Call once at startup.
+ *
+ * @param options.allowDark  Enable dark mode for this project (default: false).
+ *                           When false, dark / system-dark falls back to light.
+ */
+export function configureTheme(options: { allowDark?: boolean } = {}) {
+	if (options.allowDark !== undefined) {
+		allowDark.value = options.allowDark
+	}
+	// Re-apply with the new policy so a previously-saved dark choice is corrected.
+	applyTheme(colorMode.value)
+}
+
 function addTheme(theme: ThemeOption) {
 	// Check if theme with this value already exists
 	const exists = themeOptions.value.some(t => t.value === theme.value)

package/src/styles/buttons.css

@@ -101,6 +101,80 @@
     border-bottom: 1px solid currentColor !important;
 }
 
+.hover-opacity-1,
+.hover-opacity-2,
+.hover-opacity-3,
+.hover-opacity-4,
+.hover-opacity-5,
+.hover-opacity-6,
+.hover-opacity-7,
+.hover-opacity-8,
+.hover-opacity-9,
+.hover-opacity-10 {
+    transition: var(--bgl-transition);
+}
+
+.hover-opacity-1:hover,
+.hover-opacity-1:active,
+.hover-opacity-1:focus {
+    opacity: 0.1;
+}
+
+.hover-opacity-2:hover,
+.hover-opacity-2:active,
+.hover-opacity-2:focus {
+    opacity: 0.2;
+}
+
+
+.hover-opacity-3:hover,
+.hover-opacity-3:active,
+.hover-opacity-3:focus {
+    opacity: 0.3;
+}
+
+.hover-opacity-4:hover,
+.hover-opacity-4:active,
+.hover-opacity-4:focus {
+    opacity: 0.4;
+}
+
+.hover-opacity-5:hover,
+.hover-opacity-5:active,
+.hover-opacity-5:focus {
+    opacity: 0.5;
+}
+
+.hover-opacity-6:hover,
+.hover-opacity-6:active,
+.hover-opacity-6:focus {
+    opacity: 0.6;
+}
+
+.hover-opacity-7:hover,
+.hover-opacity-7:active,
+.hover-opacity-7:focus {
+    opacity: 0.7;
+}
+
+.hover-opacity-8:hover,
+.hover-opacity-8:active,
+.hover-opacity-8:focus {
+    opacity: 0.8;
+}
+
+.hover-opacity-9:hover,
+.hover-opacity-9:active,
+.hover-opacity-9:focus {
+    opacity: 0.9;
+}
+
+.hover-opacity-10:hover,
+.hover-opacity-10:active,
+.hover-opacity-10:focus {
+    opacity: 1;
+}
+
 .border {
     border: 1px solid var(--bgl-border-color);
 }