@bagelink/vue 1.15.59 → 1.15.63

package/src/components/layout/AppSidebar.vue

@@ -5,10 +5,12 @@ import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { resolveI18n } from '../../i18n'
 import { useAppLayout, SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_COLLAPSED_WIDTH_CARD } from './appLayoutContext'
+import SidebarNavItem from './SidebarNavItem.vue'
 
 // Extended interface for links with active route tracking
 interface LinkWithAction extends NavLink {
 	activeRoutes?: string[] // Routes that should be marked as active for this link
+	children?: LinkWithAction[] // Nested sub-links (expandable group / collapsed flyout)
 }
 
 interface Props {
@@ -167,21 +169,16 @@ const sidebarStyles = computed(() => {
 
 			<!-- Navigation Links -->
 			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start" :class="{ 'justify-content-center': props.centerlinks }">
-				<Btn
-					v-for="link in props.navLinks" :key="link.to"
-					:title="!isOpen && !isMobile ? resolveI18n(link.label) : ''" fullWidth
-					alignTxt="start" class="flex-shrink-0 px-075" :class="{ 'nav-btn-active': isActiveRoute(link) }"
-					:style="{
-						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
-						color: isActiveRoute(link) ? 'white' : props.textColor,
-					}"
-					:to="link.to || '/'" @click="link.action"
-				>
-					<Icon :name="link.icon" size="1.2" />
-					<span class="nav-text">
-						{{ resolveI18n(link.label) }}
-					</span>
-				</Btn>
+				<SidebarNavItem
+					v-for="link in props.navLinks" :key="link.to || link.label"
+					:link="link"
+					:open="isVisuallyOpen"
+					:real-open="isOpen"
+					:is-mobile="isMobile"
+					:bg-color="props.bgColor"
+					:text-color="props.textColor"
+					:active-color="props.activeColor"
+				/>
 			</nav>
 			<!-- Footer -->
 			<div class="sidebar-footer flex column flex-stretch gap-025 align-items-start px-025 mt-auto">

package/src/components/layout/Divider.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+defineOptions({ name: 'BglDivider' })
+import { useSlots } from 'vue'
+
+/**
+ * Hairline separator in the theme border color.
+ * - Horizontal by default; `vertical` for inline groups (toolbars, breadcrumbs).
+ * - Default slot (or `label`) renders centered text with a line on each side
+ *   (horizontal only) — e.g. an "OR" divider.
+ * - `size` sets the length of a vertical divider (maps to --divider-size).
+ */
+const {
+	vertical = false,
+	label = '',
+	size,
+	class: className = '',
+} = defineProps<{
+	vertical?: boolean
+	label?: string
+	size?: string
+	class?: string
+}>()
+
+const slots = useSlots()
+</script>
+
+<template>
+	<!-- vertical: short hairline, no label support -->
+	<div
+		v-if="vertical"
+		class="divider-v"
+		:class="className"
+		:style="size ? { '--divider-size': size } : undefined"
+		role="separator"
+		aria-orientation="vertical"
+	/>
+
+	<!-- horizontal with label/slot: line — content — line -->
+	<div v-else-if="label || slots.default" class="bgl-divider-labeled flex gap-075" :class="className" role="separator">
+		<span class="divider bgl-divider-line" />
+		<span class="bgl-divider-label flex-shrink-0 white-space-nowrap"><slot>{{ label }}</slot></span>
+		<span class="divider bgl-divider-line" />
+	</div>
+
+	<!-- plain horizontal hairline -->
+	<div v-else class="divider" :class="className" role="separator" />
+</template>
+
+<style scoped>
+.bgl-divider-line {
+	flex: 1;
+}
+.bgl-divider-label {
+	font-size: 0.8125rem;
+	color: var(--bgl-text-soft, var(--bgl-gray));
+}
+</style>

package/src/components/layout/Layout.vue

@@ -22,19 +22,32 @@ const props = withDefaults(defineProps<LayoutProrps>(), {
 
 })
 
-const gridTemplateRows = computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
+// Bare `fr` tracks won't shrink below their content's intrinsic size, which
+// causes overflow when a child (table, long text, nested grid) is wider than its
+// share. Wrapping in `minmax(0, …)` makes the track shrinkable — the behaviour
+// you almost always want. Authors can opt out by passing an explicit minmax().
+function normalizeTrack(track: string): string {
+	const t = track.trim()
+	if (/^\d*\.?\d+fr$/.test(t)) { return `minmax(0, ${t})` }
+	return t
+}
+function buildTemplate(tracks: string[]): string {
+	return tracks.length > 0 ? tracks.map(normalizeTrack).join(' ') : 'auto'
+}
+
+const gridTemplateRows = computed(() => buildTemplate(props.rows))
 const gapSize = computed(() => `${props.gap}rem`)
 const mGapSize = computed(() => props.mGap !== undefined ? `${props.mGap}rem` : gapSize.value)
 
 const mGridTemplateRows = computed(() => {
-	if (props.mRows?.length) { return props.mRows.join(' ') }
+	if (props.mRows?.length) { return buildTemplate(props.mRows) }
 	return gridTemplateRows.value
 })
 
-const gridTemplateColumns = computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))
+const gridTemplateColumns = computed(() => buildTemplate(props.columns))
 
 const mGridTemplateColumns = computed(() => {
-	if (props.mColumns?.length) { return props.mColumns.join(' ') }
+	if (props.mColumns?.length) { return buildTemplate(props.mColumns) }
 	return gridTemplateColumns.value
 })
 </script>

package/src/components/layout/SidebarNavItem.vue

@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { NavLink } from '@bagelink/vue'
+import { Btn, Icon, Dropdown } from '@bagelink/vue'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { resolveI18n } from '../../i18n'
+
+interface LinkWithAction extends NavLink {
+	activeRoutes?: string[]
+	children?: LinkWithAction[]
+	action?: () => void
+}
+
+const props = withDefaults(defineProps<{
+	link: LinkWithAction
+	/** sidebar is visually expanded (stays true during the collapse transition) */
+	open: boolean
+	/** real open state — flips immediately when the user toggles the sidebar */
+	realOpen?: boolean
+	isMobile: boolean
+	bgColor: string
+	textColor: string
+	activeColor: string
+}>(), {})
+
+const route = useRoute()
+
+const hasChildren = computed(() => !!props.link.children?.length)
+
+// active detection (mirrors AppSidebar logic, recursive for parents)
+function linkActive(link: LinkWithAction): boolean {
+	const linkPath = link.to
+	if (link.activeRoutes?.length) {
+		return link.activeRoutes.some(p =>
+			p === '/' ? route.path === p : route.path === p || route.path.startsWith(`${p}/`))
+	}
+	if (!linkPath) return false
+	if (linkPath === '/') return route.path === linkPath
+	return route.path === linkPath || route.path.startsWith(`${linkPath}/`)
+}
+
+const childActive = computed(() => props.link.children?.some(linkActive) ?? false)
+const selfActive = computed(() => linkActive(props.link))
+const isActive = computed(() => selfActive.value || (hasChildren.value && childActive.value))
+
+// expanded/collapsed group state — auto-open when a child is active
+const expanded = ref(childActive.value)
+watch(childActive, v => { if (v) expanded.value = true })
+
+// Collapse the open child group smoothly *before* the layout switches to the
+// icon-only flyout, so parents don't jump up when the sidebar narrows. We watch
+// `realOpen` (which flips immediately on toggle) rather than `open` (which stays
+// true throughout the width transition), so the grid-rows collapse animation runs
+// in sync with the sidebar narrowing instead of snapping at the end.
+watch(() => props.realOpen, (isOpenNow) => {
+	if (isOpenNow) expanded.value = childActive.value
+	else expanded.value = false
+})
+
+function onParentClick() {
+	if (hasChildren.value) expanded.value = !expanded.value
+	else props.link.action?.()
+}
+</script>
+
+<template>
+	<!-- LEAF link -->
+	<Btn
+		v-if="!hasChildren"
+		:title="!open && !isMobile ? resolveI18n(link.label) : ''"
+		fullWidth alignTxt="start" class="flex-shrink-0 px-075"
+		:class="{ 'nav-btn-active': selfActive }"
+		:style="{
+			backgroundColor: selfActive ? activeColor : bgColor,
+			color: selfActive ? 'white' : textColor,
+		}"
+		:to="link.to || '/'" @click="link.action"
+	>
+		<Icon :name="link.icon" size="1.2" />
+		<span class="nav-text">{{ resolveI18n(link.label) }}</span>
+	</Btn>
+
+	<!-- PARENT with children, EXPANDED sidebar -->
+	<div v-else-if="open || isMobile" class="sidebar-group w100p">
+		<Btn
+			fullWidth alignTxt="start" flat class="flex-shrink-0 px-075 sidebar-group-toggle txt-start sidebar-parent"
+			:class="{ 'sidebar-parent-active bold': isActive }"
+			:style="{
+				color: isActive ? activeColor : textColor,
+			}"
+			@click="onParentClick"
+		>
+			<Icon :name="link.icon" size="1.2" />
+			<span class="nav-text flex-grow">{{ resolveI18n(link.label) }}</span>
+			<Icon name="expand_more" size="1.1" class="nav-text sidebar-chevron" :class="{ 'sidebar-chevron-open': expanded }" />
+		</Btn>
+		<div class="sidebar-children" :class="{ 'sidebar-children-open': expanded }">
+			<div class="sidebar-children-inner ps-1">
+				<Btn
+					v-for="child in link.children" :key="child.to || child.label"
+					fullWidth alignTxt="start"  class="flex-shrink-0 ps-075 pe-075 sidebar-child"
+					:class="{ 'bold sidebar-child-active': linkActive(child) }"
+					:style="{
+						color: linkActive(child) ? activeColor : textColor,
+						'--sidebar-active-color': activeColor,
+					}"
+					flat
+					:to="child.to || '/'" @click="child.action"
+				>
+					<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
+					<span class="nav-text">{{ resolveI18n(child.label) }}</span>
+				</Btn>
+			</div>
+		</div>
+	</div>
+
+	<!-- PARENT with children, COLLAPSED sidebar → hover popover flyout -->
+	<Dropdown
+		v-else
+		placement="right-start"
+		:triggers="['hover']"
+		:delay="{ show: 0, hide: 200 }"
+		card
+		class="w100p sidebar-flyout-trigger"
+	>
+		<template #trigger>
+			<Btn
+				fullWidth alignTxt="start" class="flex-shrink-0 px-075"
+				:class="{ 'nav-btn-active': isActive }"
+				:style="{
+					backgroundColor: isActive ? activeColor : bgColor,
+					color: isActive ? 'white' : textColor,
+				}"
+			>
+				<Icon :name="link.icon" size="1.2" />
+				<span class="nav-text">{{ resolveI18n(link.label) }}</span>
+			</Btn>
+		</template>
+		<!-- flyout content -->
+		<div class="sidebar-flyout p-05 min-w-180px display-flex gap-025 column">
+			<p class="sidebar-flyout-label m-0 semi opacity-5 uppercase">{{ resolveI18n(link.label) }}</p>
+			<Btn
+				v-for="child in link.children" :key="child.to || child.label"
+				fullWidth alignTxt="start" thin flat class="flex-shrink-0 px-075 radius-1 sidebar-child"
+				:class="{ 'bold sidebar-child-active': linkActive(child) }"
+				:style="{
+					color: linkActive(child) ? activeColor : 'var(--bgl-text-color)',
+					'--sidebar-active-color': activeColor,
+				}"
+				:to="child.to || '/'" @click="child.action"
+			>
+				<Icon v-if="child.icon" :name="child.icon" size="1.05" class="opacity-7" />
+				<span>{{ resolveI18n(child.label) }}</span>
+			</Btn>
+		</div>
+	</Dropdown>
+</template>
+
+<style scoped>
+.sidebar-chevron {
+	margin-inline-start: auto;
+	transition: transform 0.2s ease;
+	opacity: 0.6;
+}
+.sidebar-chevron-open {
+	transform: rotate(180deg)!important;
+}
+.sidebar-children {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	overflow: hidden;
+}
+.sidebar-children-open {
+	grid-template-rows: 1fr;
+}
+.sidebar-children-inner {
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.125rem;
+}
+.sidebar-children-open .sidebar-children-inner {
+	padding-block: 0.25rem;
+}
+/* Parent toggle — flat <Btn> with no color prop picks up a default `pair-black`
+   background; neutralize it so the active parent shows only colored text/icon. */
+.sidebar-parent.bgl_btn {
+	background-color: transparent !important;
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+.sidebar-parent.bgl_btn:hover {
+	background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
+	filter: none;
+}
+
+.sidebar-flyout-label {
+	padding: 0.25rem 0.5rem 0.375rem;
+	font-size: 0.6875rem;
+}
+</style>
+
+<!-- Global (un-scoped) so the same child styling also applies inside the flyout,
+     which is teleported to <body> and therefore outside this component's scope. -->
+<style>
+.sidebar-child {
+	font-size: 0.85rem;
+	position: relative;
+	transition: background-color 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
+}
+/* Neutralize the default `pair-black` background a flat <Btn> picks up when no
+   color prop is set, so we can control the child background ourselves. */
+.sidebar-child.bgl_btn {
+	background-color: transparent !important;
+}
+/* Active child — filled with a subtle tint of the active color. */
+.sidebar-child.bgl_btn.sidebar-child-active,
+.sidebar-child.bgl_btn.sidebar-child-active:hover {
+	background-color: color-mix(in srgb, var(--sidebar-active-color) 14%, transparent) !important;
+}
+
+/* Hover indication for children (mirrors the parent feel) */
+.sidebar-child.bgl_btn:hover {
+	background-color: color-mix(in srgb, currentColor 12%, transparent) !important;
+	filter: none;
+}
+</style>

package/src/components/layout/index.ts

@@ -4,6 +4,7 @@ export { default as AppSidebar } from './AppSidebar.vue'
 export { useAppLayout } from './appLayoutContext'
 export type { AppLayoutContext } from './appLayoutContext'
 export { default as BottomMenu } from './BottomMenu.vue'
+export { default as Divider } from './Divider.vue'
 export { default as Layout } from './Layout.vue'
 export { default as Panel } from './Panel.vue'
 export { default as Resizable } from './Resizable.vue'

package/src/directives/index.ts

@@ -1,4 +1,6 @@
 export { default as pattern } from './pattern'
+export { default as reveal } from './reveal'
+export type { RevealOptions } from './reveal'
 export { default as ripple } from './ripple'
 export { vResize } from './vResize'
 export type { ResizeEvent, ResizeOptions } from './vResize'

package/src/directives/reveal.ts

@@ -0,0 +1,78 @@
+import type { Directive, DirectiveBinding } from 'vue'
+
+/**
+ * v-reveal — animate an element into view on first scroll-intersection.
+ *
+ *   <div v-reveal>…</div>                       // default: fade + rise
+ *   <div v-reveal="'left'">…</div>              // slide from a direction
+ *   <div v-reveal="{ y: 'up', delay: 120 }">…</div>
+ *   <Card v-for="…" v-reveal="{ delay: i * 80 }" />   // stagger
+ *
+ * Adds `.bgl-reveal` immediately (hidden, pre-transformed) and toggles
+ * `.bgl-reveal-in` once the element enters the viewport. Honors
+ * `prefers-reduced-motion` (shows instantly, no transform). All visual tuning
+ * lives in CSS (motion.css) via data-attributes, so it's themeable and cheap.
+ */
+
+type Dir = 'up' | 'down' | 'left' | 'right' | 'none'
+
+interface RevealOptions {
+	/** Direction the element travels in from. Default 'up'. */
+	y?: Dir
+	/** Stagger / entrance delay in ms. */
+	delay?: number
+	/** Animate only once (default) or re-run when scrolled away and back. */
+	once?: boolean
+	/** 0–1 visibility threshold before triggering. Default 0.12. */
+	threshold?: number
+}
+
+const prefersReducedMotion = () =>
+	typeof window !== 'undefined'
+	&& window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+
+function parse(value: RevealOptions | Dir | undefined): Required<RevealOptions> {
+	const base: Required<RevealOptions> = { y: 'up', delay: 0, once: true, threshold: 0.12 }
+	if (!value) { return base }
+	if (typeof value === 'string') { return { ...base, y: value } }
+	return { ...base, ...value }
+}
+
+const observers = new WeakMap<HTMLElement, IntersectionObserver>()
+
+const reveal: Directive<HTMLElement, RevealOptions | Dir> = {
+	mounted(el, binding: DirectiveBinding<RevealOptions | Dir>) {
+		const opts = parse(binding.value)
+
+		// Reduced motion: reveal instantly, skip all transforms/observers.
+		if (prefersReducedMotion()) { return }
+
+		el.classList.add('bgl-reveal')
+		if (opts.y !== 'none') { el.dataset.revealDir = opts.y }
+		if (opts.delay) { el.style.setProperty('--bgl-reveal-delay', `${opts.delay}ms`) }
+
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.isIntersecting) {
+					el.classList.add('bgl-reveal-in')
+					if (opts.once) { observer.unobserve(el) }
+				} else if (!opts.once) {
+					el.classList.remove('bgl-reveal-in')
+				}
+			}
+		}, { threshold: opts.threshold, rootMargin: '0px 0px -8% 0px' })
+
+		observer.observe(el)
+		observers.set(el, observer)
+	},
+	unmounted(el) {
+		observers.get(el)?.disconnect()
+		observers.delete(el)
+	},
+	getSSRProps() {
+		return {}
+	},
+}
+
+export default reveal
+export type { RevealOptions }

package/src/plugins/bagel.ts

@@ -5,7 +5,7 @@ import type { BagelToastOptions } from './useToast'
 import FloatingVue from 'floating-vue'
 import lightboxPlugin from '../components/lightbox/index'
 import { DialogPlugin } from '../dialog/useDialog'
-import { ripple, pattern } from '../directives'
+import { ripple, pattern, reveal } from '../directives'
 import { createI18n, getI18n } from '../i18n'
 import clickOutside from '../utils/clickOutside'
 import { ToastPlugin } from './useToast'
@@ -23,6 +23,7 @@ export const BagelVue: Plugin<BagelOptions> = {
 		app.directive('click-outside', clickOutside)
 		app.directive('ripple', ripple)
 		app.directive('pattern', pattern)
+		app.directive('reveal', reveal)
 
 		// Install UI plugins
 		app.use(lightboxPlugin)

package/src/styles/appearance.css

@@ -767,6 +767,17 @@
     filter: saturate(200%) !important;
 }
 
+/* Glass — frosted translucent surface for use over photos / gradients / dark
+ * heroes (nav pills, eyebrow chips, overlays). Light-on-dark by default; flip
+ * with --bgl-glass-bg / --bgl-glass-color / --bgl-glass-border. */
+.glass {
+    background-color: var(--bgl-glass-bg, rgba(255, 255, 255, 0.18)) !important;
+    color: var(--bgl-glass-color, #fff) !important;
+    border: 1px solid var(--bgl-glass-border, rgba(255, 255, 255, 0.28)) !important;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
 /* Backdrop Filter */
 .backdrop-blur-none {
     backdrop-filter: blur(0) !important;

package/src/styles/bagel.css

@@ -21,6 +21,7 @@
 @import "buttons.css";
 @import "scrollbar.css";
 @import "transitions.css";
+@import "motion.css";
 @import "loginCard.css";
 @import "app-layout.css";
 

package/src/styles/dark.css

@@ -26,6 +26,11 @@
   filter: invert(1);
 } */
 
+/* `:root.bgl-dark-mode` (the class lives on <html>) raises specificity to
+   (0,2,0) so these tokens win over any project that redefines colors in its
+   own `:root {}` (e.g. udi sets --bgl-blue: #7ad3f7). The bare .bgl-dark-mode
+   is kept as a fallback in case the class is applied to a non-root element. */
+:root.bgl-dark-mode,
 .bgl-dark-mode {
   /* ---- Dark palette (raw values) ---------------------------------------- */
   --bgl-dm-bg: #121317;
@@ -41,14 +46,31 @@
   /* primary text */
   --bgl-dm-text-muted: #9a9b9d;
   /* secondary text */
-  --bgl-dm-border: #383a3f;
-  /* borders / dividers */
+  --bgl-dm-border: rgba(255, 255, 255, 0.12);
+  /* borders / dividers — translucent light, mirroring the light-mode
+     #00000020 (translucent dark). Blends over any dark surface (bg, card,
+     input) instead of being a fixed opaque gray. */
 
   /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */
   --bgl-primary: #4f7cff !important;
   --bgl-primary-tint: #4f7cff33;
   --bgl-primary-light: #1a2236;
 
+  /* ---- Status / accent colors (tuned for dark backgrounds) ------------- *
+	 * The light-mode bases (e.g. blue #2e5bff, green #75c98f, red #ed6c6f,
+	 * yellow #ffbb00) are either too dark/saturated or too pastel to read well
+	 * on a dark surface. Shift them lighter and slightly desaturated so they
+	 * pop against the dark UI without glowing. Tints follow the same hue at low
+	 * opacity for soft fills/badges. */
+  --bgl-blue: #5b8cff;
+  --bgl-blue-tint: rgba(91, 140, 255, 0.18);
+  --bgl-green: #5dd49b;
+  --bgl-green-tint: rgba(93, 212, 155, 0.18);
+  --bgl-red: #f47174;
+  --bgl-red-tint: rgba(244, 113, 116, 0.18);
+  --bgl-yellow: #ffc94d;
+  --bgl-yellow-tint: rgba(255, 201, 77, 0.18);
+
   /* ---- Surfaces / backgrounds ------------------------------------------ */
   --bgl-bg: var(--bgl-dm-bg);
   --bgl-box-bg: var(--bgl-dm-surface);
@@ -58,6 +80,10 @@
   --bgl-skeleton-bg: var(--bgl-dm-surface-2);
   --bgl-skeleton-pulse: var(--bgl-dm-surface);
   --bgl-gray-light: var(--bgl-dm-surface-2);
+  /* --bgl-gray (#b7b7b7 in light) is used directly by color-gray / bg-gray and
+     as a neutral mid tone. On dark, keep it a readable mid-gray so color-gray
+     text stays legible; bg-gray fills get a dedicated darker treatment below. */
+  --bgl-gray: #8b8f96;
 
   /* ---- Text ------------------------------------------------------------- */
   --bgl-text-color: var(--bgl-dm-text);
@@ -121,6 +147,57 @@
   --bgl-gray-10: color-mix(in oklab, white 4%, var(--bgl-dm-surface));
   --bgl-gray-20: color-mix(in oklab, white 8%, var(--bgl-dm-surface));
   --bgl-gray-30: color-mix(in oklab, white 13%, var(--bgl-dm-surface));
+  /* Mid/high end of the scale: in light mode these go DARKER as the number
+     rises (gray-80 ≈ a strong gray used for lines/dividers). On dark they must
+     instead get LIGHTER so "higher number = more contrast vs the surface"
+     still holds — otherwise gray-80 lines vanish on the dark background.
+     Fixes calendar hour-lines and any other gray-40..90 separators at once. */
+  --bgl-gray-40: color-mix(in oklab, white 18%, var(--bgl-dm-surface));
+  --bgl-gray-50: color-mix(in oklab, white 24%, var(--bgl-dm-surface));
+  --bgl-gray-60: color-mix(in oklab, white 32%, var(--bgl-dm-surface));
+  --bgl-gray-70: color-mix(in oklab, white 42%, var(--bgl-dm-surface));
+  --bgl-gray-80: color-mix(in oklab, white 54%, var(--bgl-dm-surface));
+  --bgl-gray-90: color-mix(in oklab, white 70%, var(--bgl-dm-surface));
+
+  /* ---- Colored tint scale (10/20/30) ----------------------------------- *
+   * In light mode --bgl-{color}-10/20/30 are near-white pastel washes (e.g.
+   * green-30 = 70% white + green) used as soft fills — chat bubbles, badges,
+   * highlighted rows. On a dark UI those pale pastels glow and force dark text
+   * to be unreadable. Remap each to a low-opacity wash of its OWN base color
+   * OVER the dark surface, so the fill stays subtly colored but dark, and the
+   * light text token reads on top. Higher number = a touch more color.
+   * Because these sit in the high-specificity :root.bgl-dark-mode block, they
+   * also override any project that hard-sets e.g. --bgl-blue-30 in :root.    */
+  --bgl-blue-10: color-mix(in oklab, var(--bgl-blue) 10%, var(--bgl-dm-surface));
+  --bgl-blue-20: color-mix(in oklab, var(--bgl-blue) 16%, var(--bgl-dm-surface));
+  --bgl-blue-30: color-mix(in oklab, var(--bgl-blue) 24%, var(--bgl-dm-surface));
+  --bgl-green-10: color-mix(in oklab, var(--bgl-green) 10%, var(--bgl-dm-surface));
+  --bgl-green-20: color-mix(in oklab, var(--bgl-green) 16%, var(--bgl-dm-surface));
+  --bgl-green-30: color-mix(in oklab, var(--bgl-green) 24%, var(--bgl-dm-surface));
+  --bgl-red-10: color-mix(in oklab, var(--bgl-red) 10%, var(--bgl-dm-surface));
+  --bgl-red-20: color-mix(in oklab, var(--bgl-red) 16%, var(--bgl-dm-surface));
+  --bgl-red-30: color-mix(in oklab, var(--bgl-red) 24%, var(--bgl-dm-surface));
+  --bgl-yellow-10: color-mix(in oklab, var(--bgl-yellow) 10%, var(--bgl-dm-surface));
+  --bgl-yellow-20: color-mix(in oklab, var(--bgl-yellow) 16%, var(--bgl-dm-surface));
+  --bgl-yellow-30: color-mix(in oklab, var(--bgl-yellow) 24%, var(--bgl-dm-surface));
+  --bgl-purple-10: color-mix(in oklab, var(--bgl-purple) 10%, var(--bgl-dm-surface));
+  --bgl-purple-20: color-mix(in oklab, var(--bgl-purple) 16%, var(--bgl-dm-surface));
+  --bgl-purple-30: color-mix(in oklab, var(--bgl-purple) 24%, var(--bgl-dm-surface));
+  --bgl-brown-10: color-mix(in oklab, var(--bgl-brown) 10%, var(--bgl-dm-surface));
+  --bgl-brown-20: color-mix(in oklab, var(--bgl-brown) 16%, var(--bgl-dm-surface));
+  --bgl-brown-30: color-mix(in oklab, var(--bgl-brown) 24%, var(--bgl-dm-surface));
+  --bgl-orange-10: color-mix(in oklab, var(--bgl-orange) 10%, var(--bgl-dm-surface));
+  --bgl-orange-20: color-mix(in oklab, var(--bgl-orange) 16%, var(--bgl-dm-surface));
+  --bgl-orange-30: color-mix(in oklab, var(--bgl-orange) 24%, var(--bgl-dm-surface));
+  --bgl-turquoise-10: color-mix(in oklab, var(--bgl-turquoise) 10%, var(--bgl-dm-surface));
+  --bgl-turquoise-20: color-mix(in oklab, var(--bgl-turquoise) 16%, var(--bgl-dm-surface));
+  --bgl-turquoise-30: color-mix(in oklab, var(--bgl-turquoise) 24%, var(--bgl-dm-surface));
+  --bgl-pink-10: color-mix(in oklab, var(--bgl-pink) 10%, var(--bgl-dm-surface));
+  --bgl-pink-20: color-mix(in oklab, var(--bgl-pink) 16%, var(--bgl-dm-surface));
+  --bgl-pink-30: color-mix(in oklab, var(--bgl-pink) 24%, var(--bgl-dm-surface));
+  --bgl-primary-10: color-mix(in oklab, var(--bgl-primary) 10%, var(--bgl-dm-surface));
+  --bgl-primary-20: color-mix(in oklab, var(--bgl-primary) 16%, var(--bgl-dm-surface));
+  --bgl-primary-30: color-mix(in oklab, var(--bgl-primary) 24%, var(--bgl-dm-surface));
 }
 
 /* Native form controls (date/time pickers) render dark glyphs that are
@@ -156,6 +233,25 @@
   border-color: var(--bgl-dm-border);
 }
 
+/* .pair-white (e.g. <Btn color="white">) and .pair-gray are neutral/secondary
+   fills on light UIs (literal white / a light #b7b7b7 gray). On dark they stay
+   glaring light blocks, so for the FILLED variant turn them into a raised dark
+   surface with light text and a hairline border (a proper secondary button).
+   Flat pills and border pills keep their own treatment (they only tint text /
+   outline, not the fill), so we exclude them. */
+.bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border),
+.bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border) {
+  background-color: var(--bgl-dm-surface-2);
+  color: var(--bgl-dm-text);
+  border-color: var(--bgl-dm-border);
+}
+/* Hover/active on the dark secondary button: lift one step instead of the
+   default lighten-filter which would wash the light original out. */
+.bgl-dark-mode .pair-white:not(.bgl_flatPill):not(.bgl_pill-border):hover,
+.bgl-dark-mode .pair-gray:not(.bgl_flatPill):not(.bgl_pill-border):hover {
+  background-color: color-mix(in oklab, white 8%, var(--bgl-dm-surface-2));
+}
+
 /* ----------------------------------------------------------------------------
  * Absolute color utilities (bg-white / bg-black …)
  * ----------------------------------------------------------------------------
@@ -177,6 +273,15 @@
   color: var(--bgl-dm-text);
 }
 
+/* bg-gray is a solid light-gray (#b7b7b7) fill in light mode — used as a
+   neutral surface. On dark it becomes a bright patch, so remap it to a raised
+   dark surface (one step up from the card) like the other neutral fills. */
+.bgl-dark-mode .bg-gray:not(.keep-white) {
+  background: var(--bgl-dm-surface-2) !important;
+  --alpha-color: var(--bgl-dm-surface-2);
+  color: var(--bgl-dm-text);
+}
+
 .bgl-dark-mode .bg-input-white:not(.keep-white) input,
 .bgl-dark-mode .bg-input-white:not(.keep-white) textarea,
 .bgl-dark-mode .bg-input-white:not(.keep-white) .selectinput-btn,