@bagelink/vue 1.15.73 → 1.15.75

package/package.json

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

package/src/components/Alert.vue

@@ -10,7 +10,10 @@ type AlertType = 'info' | 'success' | 'warning' | 'error'
 interface Props {
 	message?: string
 	thin?: boolean
+	/** Border + transparent background (drops the tinted fill). */
 	outline?: boolean
+	/** Adds a border while keeping the tinted background. */
+	frame?: boolean
 	dismissable?: boolean
 	type?: AlertType
 	/** Boolean shorthands: <Alert error>...</Alert> */
@@ -42,7 +45,7 @@ const typeIcon: Record<AlertType, IconType> = {
 </script>
 
 <template>
-	<div v-if="!isDismissed" class="alert" :class="[computedType, { thin, outline }]" :dismissable="dismissable">
+	<div v-if="!isDismissed" class="alert" :class="[computedType, { thin, outline, frame }]" :dismissable="dismissable">
 		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || typeIcon[computedType]" :size="1.7" />
 		<slot>
 			<p class="m-0">
@@ -100,6 +103,11 @@ const typeIcon: Record<AlertType, IconType> = {
   background: unset;
 }
 
+/* frame: border in the alert's accent color, keeps the tinted background. */
+.alert.frame {
+  border: 1px solid var(--alert-outline);
+}
+
 .alert_icon {
   line-height: 1;
 }

package/src/components/Badge.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglBadge' })
-import type { IconType, ThemeType } from '@bagelink/vue'
+import type { IconType, ThemeType, GradientProp, GradientDirProp } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Btn, Icon } from '@bagelink/vue'
+import { Btn, Icon, useGradientVariant } from '@bagelink/vue'
 import { computed, useSlots } from 'vue'
 import '../styles/base-colors.css'
 
@@ -17,10 +17,25 @@ const props = defineProps<{
 	icon?: IconType
 	iconEnd?: IconType
 	color?: ThemeType
-	variant?: 'solid' | 'flat' | 'outline' | 'glass'
+	variant?: 'solid' | 'flat' | 'outline' | 'glass' | 'soft' | 'frost'
 	/** Boolean variant shorthands: <Badge flat /> — same as variant="flat" */
 	flat?: boolean
 	outline?: boolean
+	/** Soft variant: light tinted bg + full-color text & border, driven by `color`.
+	    Shorthand for variant="soft". e.g. <Badge color="blue" soft /> */
+	soft?: boolean
+	/** Frost variant: translucent + blur, tinted by `color`. Reads beautifully
+	    over photos / gradients / dark heroes. Shorthand for variant="frost". */
+	frost?: boolean
+	/** Gradient fill (white text). Boolean = auto (a darker shade of `color`);
+	    or a space-separated tone list — "purple" pairs with `color`
+	    (blue→purple), "blue purple pink" defines all stops. */
+	gradient?: GradientProp
+	/** Gradient direction: a named direction ("to-br") or an angle in degrees
+	    (45 or "45"). Defaults to 135deg. */
+	gradientDir?: GradientDirProp
+	/** Solid fill + a hairline border (keeps the background, unlike `outline`). */
+	frame?: boolean
 	/** Translucent frosted badge — readable on photos / gradients / dark heroes.
 	    Shorthand for variant="glass". */
 	glass?: boolean
@@ -49,9 +64,19 @@ const computedTheme = computed(
 	},
 )
 
+const { isGradient, gradientStyle } = useGradientVariant({
+	gradient: () => props.gradient,
+	gradientDir: () => props.gradientDir,
+	color: () => props.color,
+})
+
 const computedPairClass = computed(() => {
 	const theme = computedTheme.value
-	if (!theme) return 'pair-primary'
+	if (!theme) {
+		// Frost defaults to a white (light-on-dark) glass when no color is given.
+		if (computedVariant.value === 'frost') { return 'pair-white' }
+		return 'pair-primary'
+	}
 	return `pair-${theme}`
 })
 
@@ -64,7 +89,10 @@ const computedSize = computed(() => {
 
 const computedVariant = computed(() => {
 	if (props.variant) { return props.variant }
+	if (isGradient.value) { return 'gradient' }
+	if (props.frost) { return 'frost' }
 	if (props.glass) { return 'glass' }
+	if (props.soft) { return 'soft' }
 	if (props.flat) { return 'flat' }
 	if (props.outline || props.border) { return 'outline' }
 	return 'solid'
@@ -76,7 +104,11 @@ const computedClasses = computed(() => {
 		'round': props.round,
 		'bgl_flatPill': computedVariant.value === 'flat',
 		'bgl_pill-border': computedVariant.value === 'outline',
+		'bgl_pill-frame': props.frame,
 		'bgl_glassPill': computedVariant.value === 'glass',
+		'soft': computedVariant.value === 'soft',
+		'frost': computedVariant.value === 'frost',
+		'gradient': computedVariant.value === 'gradient',
 		'pillLarge': computedSize.value === 'lg',
 		'pillSmall': computedSize.value === 'sm',
 	}
@@ -91,7 +123,7 @@ const computedClasses = computed(() => {
 <template>
 	<div
 		class="bgl_pill"
-		style="height: var(--bgl-pill-height);"
+		:style="[{ height: 'var(--bgl-pill-height)' }, gradientStyle]"
 		:disabled="disabled"
 		:class="computedClasses"
 	>

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { IconType, ExtendedThemeType, TranslatableString } from '@bagelink/vue'
+import type { IconType, ExtendedThemeType, TranslatableString, GradientProp, GradientDirProp } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { Icon, Loading, useDialog, useI18n, resolveI18n, MOBILE_BREAKPOINT } from '@bagelink/vue'
+import { Icon, Loading, useDialog, useI18n, resolveI18n, useGradientVariant, MOBILE_BREAKPOINT } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted, computed } from 'vue'
 import { RouterLink } from 'vue-router'
 defineOptions({ name: 'BglBtn' })
@@ -13,10 +13,25 @@ const props = withDefaults(
 		iconSize?: number | string
 		iconMobileSize?: number | string
 		color?: ExtendedThemeType
-		variant?: 'solid' | 'flat' | 'outline'
+		variant?: 'solid' | 'flat' | 'outline' | 'soft' | 'frost'
 		/** Boolean variant shorthands: <Btn flat /> — same as variant="flat" */
 		flat?: boolean
 		outline?: boolean
+		/** Soft variant: light tinted bg + full-color text & border, driven by `color`.
+		    Shorthand for variant="soft". e.g. <Btn color="blue" soft /> */
+		soft?: boolean
+		/** Frost variant: translucent + blur, tinted by `color`. Reads beautifully
+		    over photos / gradients / dark heroes. Shorthand for variant="frost". */
+		frost?: boolean
+		/** Gradient fill (white text). Boolean = auto (a darker shade of `color`);
+		    or a space-separated tone list — "purple" pairs with `color`
+		    (blue→purple), "blue purple pink" defines all stops. */
+		gradient?: GradientProp
+		/** Gradient direction: a named direction ("to-br") or an angle in degrees
+		    (45 or "45"). Defaults to 135deg. */
+		gradientDir?: GradientDirProp
+		/** Solid fill + a hairline border (keeps the background, unlike `outline`). */
+		frame?: boolean
 		/** @deprecated Use `outline` */
 		border?: boolean
 		thin?: boolean
@@ -67,17 +82,41 @@ const emit = defineEmits<{
 
 const { $t } = useI18n()
 
+const { isGradient, gradientStyle } = useGradientVariant({
+	gradient: () => props.gradient,
+	gradientDir: () => props.gradientDir,
+	color: () => props.color,
+})
+
 const computedVariant = computed(() => {
 	if (props.variant) { return props.variant }
-	if (props.flat) { return 'flat' }
+	if (isGradient.value) { return 'gradient' }
+	if (props.frost) { return 'frost' }
+	if (props.soft) { return 'soft' }
+	// An explicit `outline`/`border` wins over `flat` — components like Dropdown
+	// default the trigger to `flat`, so `<Dropdown outline>` must still resolve to
+	// the outline variant rather than being swallowed by the inherited flat.
 	if (props.outline || props.border) { return 'outline' }
+	// `frame` is "solid fill + a border", so it also overrides an inherited
+	// `flat` (e.g. Dropdown's flat trigger) to restore the solid background.
+	if (props.frame) { return 'solid' }
+	if (props.flat) { return 'flat' }
 	return 'solid'
 })
 
 const computedPairClass = computed(() => {
 	const theme = props.color
 	if (!theme) {
-		// Only flat/outline buttons get a default for visibility
+		// Frost defaults to a white (light-on-dark) glass when no color is given.
+		if (computedVariant.value === 'frost') {
+			return 'pair-white'
+		}
+		// Gradient with explicit stops (e.g. gradient="blue purple") needs a pair
+		// class only to activate `.gradient`; default to primary for the auto case.
+		if (computedVariant.value === 'gradient') {
+			return 'pair-primary'
+		}
+		// Only flat/outline/soft buttons get a default for visibility
 		if (computedVariant.value !== 'solid') {
 			return 'pair-black'
 		}
@@ -181,7 +220,11 @@ const slots: SetupContext['slots'] = useSlots()
 			round,
 			'bgl_flatPill': computedVariant === 'flat',
 			'bgl_pill-border': computedVariant === 'outline',
-		}, computedPairClass]" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
+			'soft': computedVariant === 'soft',
+			'frost': computedVariant === 'frost',
+			'gradient': computedVariant === 'gradient',
+			'bgl_pill-frame': frame,
+		}, computedPairClass]" :style="gradientStyle" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
 		<Loading v-if="loading" class="h-100p" size="15" color="currentColor" />
 		<div v-else class="bgl_btn-flex">

package/src/components/Card.vue

@@ -49,7 +49,7 @@ const is = computed(() => {
 	<component
 		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="{
 			thin,
-			'border': outline,
+			'border bg-transparent': outline,
 			'h-100': h100,
 			[bg || '']: bg,
 			'overflow-x': overflowX,
@@ -57,7 +57,7 @@ const is = computed(() => {
 			'card_frame': frame,
 		}"
 	>
-		<span v-if="label" class="card_label">
+		<span v-if="label" class="card_label block label">
 			{{ label }}
 		</span>
 		<!-- Header row: title + optional trailing action. Full override via #header. -->
@@ -76,15 +76,6 @@ const is = computed(() => {
 .card_frame {
 border: 1px solid var(--bgl-border-color);
 }
-.card_label {
-font-size: 1rem;
-position: relative;
-top: -0.5rem;
-padding: 0.75rem 0;
-display: block;
-border-bottom: 1px solid var(--bgl-border-color);
-margin-bottom: 1rem;
-}
 
 /* Header row (title + action). Pulls out to the card edges via negative margins
    so its divider spans full-width regardless of the card's own padding, then
@@ -99,20 +90,6 @@ min-height: 0;
 font-weight: 600;
 }
 
-.border .card_label {
-font-size: 0.7rem;
-font-weight: 300;
-background: var(--bgl-box-bg);
-padding: 0 0.75rem;
-position: absolute;
-top: -0.5rem;
-inset-inline-start: 1rem;
-border-left: 1px solid var(--bgl-border-color);
-border-right: 1px solid var(--bgl-border-color);
-border-bottom: unset;
-
-}
-
 .bgl_card {
 --bgl-card-pad: 2rem;
 border-radius: var(--bgl-card-border-radius);
@@ -125,11 +102,6 @@ position: relative;
 background: var(--bgl-gray-tint);
 }
 
-.bgl_card.border {
-border: 1px solid var(--bgl-border-color);
-background-color: transparent;
-}
-
 .bgl_card.thin {
 --bgl-card-pad: 1rem;
 padding: var(--bgl-card-pad);

package/src/components/Dropdown.vue

@@ -27,6 +27,8 @@ const props = withDefaults(defineProps<{
 	iconEnd?: IconType
 	border?: boolean
 	outline?: boolean
+	/** Solid fill + a hairline border on the trigger (keeps the background, unlike `outline`). */
+	frame?: boolean
 	round?: boolean
 	placement?: AlignedPlacement
 	disablePlacement?: boolean
@@ -386,7 +388,7 @@ defineExpose({ show, hide, shown })
 		>
 			<slot name="trigger" :show :hide :shown>
 				<Btn
-					:class="triggerClass" :iconEnd :icon="iconSet" :value :thin :flat :outline :round :color
+					:class="triggerClass" :iconEnd :icon="iconSet" :value :thin :flat :outline :frame :round :color
 					:disabled @click="onTriggerClick"
 				/>
 			</slot>

package/src/components/layout/TabsNav.vue

@@ -23,6 +23,8 @@ const props = defineProps<{
 	alignTxt?: 'center' | 'start' | 'end'
 	alignTxtMobile?: 'center' | 'start' | 'end'
 	outline?: boolean
+	/** Adds a border around the tabs wrapper (keeps the background). */
+	frame?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -140,7 +142,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical, 'outline': outline }">
+	<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical, 'bgl_tabs-outline': outline, 'bgl_tabs-frame': frame }">
 	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs: tabEls }">
 		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="[
 			{ active: isActive(tab) },
@@ -200,6 +202,18 @@ border-radius: calc(var(--bgl_tabs-border-radius) * 1.4);
 	gap: var(--bgl_tabs-gap);
 }
 
+/* outline: border + drop the filled background & shadow (transparent shell). */
+.bgl_tabs-outline.bgl_tabs_wrap {
+	border: 1px solid var(--bgl-border-color);
+	background: transparent;
+	box-shadow: none;
+}
+
+/* frame: border on top of the normal filled background (keeps bg & shadow). */
+.bgl_tabs-frame.bgl_tabs_wrap {
+	border: 1px solid var(--bgl-border-color);
+}
+
 .bgl_tab {
 border: none;
 background: transparent;

package/src/composables/index.ts

@@ -8,6 +8,8 @@ export { useAddToCalendar } from './useAddToCalendar'
 export { useDevice } from './useDevice'
 export { useEscapeKey } from './useEscapeKey'
 export { useExcel } from './useExcel'
+export type { GradientDir, GradientDirProp, GradientProp } from './useGradientVariant'
+export { useGradientVariant } from './useGradientVariant'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'
 export { useQuery } from './useQuery'

package/src/composables/useGradientVariant.ts

@@ -0,0 +1,100 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue } from 'vue'
+
+/** The 8 named directions, mirroring the `.to-*` utilities in gradients.css. */
+export type GradientDir
+	= 'to-t' | 'to-b' | 'to-l' | 'to-r' | 'to-tl' | 'to-tr' | 'to-bl' | 'to-br'
+
+/** `gradient` prop: boolean (auto from `color`) or a space-separated tone list,
+ *  e.g. "purple" (2-stop with `color`) or "blue purple pink" (full control). */
+export type GradientProp = boolean | string
+
+/** `gradient-dir` prop: a named direction, or an angle in degrees (number or
+ *  numeric string). Undefined → CSS default (135deg). */
+export type GradientDirProp = GradientDir | number | string
+
+const DIR_MAP: Record<GradientDir, string> = {
+	'to-t': 'to top',
+	'to-b': 'to bottom',
+	'to-l': 'to left',
+	'to-r': 'to right',
+	'to-tl': 'to top left',
+	'to-tr': 'to top right',
+	'to-bl': 'to bottom left',
+	'to-br': 'to bottom right',
+}
+
+/** Resolve a gradient-dir value to a CSS angle/keyword, or undefined for default. */
+function resolveAngle(dir: GradientDirProp | undefined): string | undefined {
+	if (dir == null || dir === '') { return undefined }
+	if (typeof dir === 'string' && dir in DIR_MAP) {
+		return DIR_MAP[dir as GradientDir]
+	}
+	const n = Number(dir)
+	return Number.isFinite(n) ? `${n}deg` : undefined
+}
+
+/** Split a tone string ("blue purple pink") into individual tone tokens. */
+function parseTones(value: GradientProp | undefined): string[] {
+	if (typeof value !== 'string') { return [] }
+	return value.trim().split(/\s+/).filter(Boolean)
+}
+
+interface UseGradientVariantArgs {
+	/** The `gradient` prop value. */
+	gradient: MaybeRefOrGetter<GradientProp | undefined>
+	/** The `gradient-dir` prop value. */
+	gradientDir?: MaybeRefOrGetter<GradientDirProp | undefined>
+	/** The component's `color` prop — used as the first stop when present. */
+	color?: MaybeRefOrGetter<string | undefined>
+}
+
+/**
+ * Shared logic for the `gradient` variant across Btn / Badge (and anything else).
+ *
+ * Stop resolution:
+ *   - `color` (if set) is the first stop, followed by tones from `gradient`.
+ *   - With no `color`, all stops come from `gradient`.
+ *   - A single resolved stop (boolean `gradient`, or one tone) lets the CSS
+ *     `.gradient` modifier auto-derive a darker second stop — so we inject
+ *     nothing and rely on its `--bgl-grad-default-*` fallback.
+ *
+ * Returns the inline CSS custom properties to bind via `:style`. Named direction
+ * / via / extra stops authored as gradients.css classes still compose on top.
+ */
+export function useGradientVariant({ gradient, gradientDir, color }: UseGradientVariantArgs) {
+	/** Whether the gradient variant is active at all. */
+	const isGradient = computed(() => {
+		const g = toValue(gradient)
+		return g === true || (typeof g === 'string' && g.trim() !== '')
+	})
+
+	const stops = computed(() => {
+		const c = toValue(color)
+		const tones = parseTones(toValue(gradient))
+		return [c, ...tones].filter(Boolean) as string[]
+	})
+
+	const gradientStyle = computed<Record<string, string>>(() => {
+		if (!isGradient.value) { return {} }
+
+		const style: Record<string, string> = {}
+		const angle = resolveAngle(toValue(gradientDir))
+		if (angle) { style['--bgl-grad-angle'] = angle }
+
+		const s = stops.value
+		// 0–1 stops → let the CSS auto-derive a darker second stop. Inject nothing.
+		if (s.length < 2) { return style }
+
+		style['--bgl-grad-from'] = `var(--bgl-${s[0]})`
+		style['--bgl-grad-to'] = `var(--bgl-${s[s.length - 1]})`
+		// Middle stops become the `via` slot (comma-terminated, like gradients.css).
+		const middle = s.slice(1, -1)
+		if (middle.length) {
+			style['--bgl-grad-via'] = `${middle.map(t => `var(--bgl-${t})`).join(', ')}, `
+		}
+		return style
+	})
+
+	return { isGradient, gradientStyle, stops }
+}

package/src/styles/bagel.css

@@ -34,6 +34,7 @@
 @import "mobileColors.css";
 @import "appearance.css";
 @import "gradients.css";
+@import "color-variants.css";
 
 /* Icon font-family bindings — mirrored from Icon.vue so icons work even when
    that component's injected <style> is not yet present (e.g. Vite dev mode). */

package/src/styles/base-colors.css

@@ -1514,6 +1514,15 @@
     outline: 1px solid;
 }
 
+/* frame: keeps the solid fill but adds a hairline border on top.
+   Unlike .bgl_pill-border (outline variant) it does NOT clear the background.
+   The border tracks the pill's own tone (falling back to the neutral border
+   color) so a filled primary button gets a primary-toned edge, not a stray
+   grey ring that reads like an outline. */
+.bgl_pill-frame {
+    border: 1px solid color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-border-color)) 55%, transparent);
+}
+
 /* Base colors flat/border */
 .pair-blue.bgl_flatPill,
 .pair-blue.bgl_pill-border {

package/src/styles/color-variants.css

@@ -0,0 +1,149 @@
+/* ─────────────────────────────────────────────────────────────────────────────
+ * COLOR VARIANTS — soft (+ future: frost / gradient)
+ *
+ * These are *modifiers* that compose on top of any `.pair-{color}` class, the
+ * same way `.bgl_flatPill` / `.bgl_pill-border` already do. Components keep
+ * computing `pair-${color}` and simply add `.soft` — nothing about the existing
+ * color system changes.
+ *
+ * SOFT = light tinted background + full-color text + full-color border.
+ *   Equivalent to:  bg-{color}-30  color-{color}  border border-{color}
+ *
+ * To stay DRY we expose one variable per tone — `--bgl-pair-tone` — set once for
+ * every shade of a color, then `.soft` derives bg / text / border from it via
+ * color-mix(). One rule covers all 13 tones × all 13 shades.
+ * ──────────────────────────────────────────────────────────────────────────── */
+
+/* 1) Map every pair tone (base + 10..130 + light/tint/dark + semantic) to a
+ *    single --bgl-pair-tone custom property. */
+.pair-primary, .pair-default,
+.pair-primary-light, .pair-primary-tint,
+.pair-primary-10, .pair-primary-20, .pair-primary-30, .pair-primary-40, .pair-primary-50,
+.pair-primary-60, .pair-primary-70, .pair-primary-80, .pair-primary-90, .pair-primary-100,
+.pair-primary-110, .pair-primary-120, .pair-primary-130 { --bgl-pair-tone: var(--bgl-primary); }
+
+.pair-blue, .pair-info,
+.pair-blue-light, .pair-blue-tint, .pair-blue-dark,
+.pair-blue-10, .pair-blue-20, .pair-blue-30, .pair-blue-40, .pair-blue-50,
+.pair-blue-60, .pair-blue-70, .pair-blue-80, .pair-blue-90, .pair-blue-100,
+.pair-blue-110, .pair-blue-120, .pair-blue-130 { --bgl-pair-tone: var(--bgl-blue); }
+
+.pair-green, .pair-success,
+.pair-green-light,
+.pair-green-10, .pair-green-20, .pair-green-30, .pair-green-40, .pair-green-50,
+.pair-green-60, .pair-green-70, .pair-green-80, .pair-green-90, .pair-green-100,
+.pair-green-110, .pair-green-120, .pair-green-130 { --bgl-pair-tone: var(--bgl-green); }
+
+.pair-red, .pair-danger,
+.pair-red-light, .pair-red-tint,
+.pair-red-10, .pair-red-20, .pair-red-30, .pair-red-40, .pair-red-50,
+.pair-red-60, .pair-red-70, .pair-red-80, .pair-red-90, .pair-red-100,
+.pair-red-110, .pair-red-120, .pair-red-130 { --bgl-pair-tone: var(--bgl-red); }
+
+.pair-yellow, .pair-warning,
+.pair-yellow-light,
+.pair-yellow-10, .pair-yellow-20, .pair-yellow-30, .pair-yellow-40, .pair-yellow-50,
+.pair-yellow-60, .pair-yellow-70, .pair-yellow-80, .pair-yellow-90, .pair-yellow-100,
+.pair-yellow-110, .pair-yellow-120, .pair-yellow-130 { --bgl-pair-tone: var(--bgl-yellow); }
+
+.pair-purple,
+.pair-purple-light,
+.pair-purple-10, .pair-purple-20, .pair-purple-30, .pair-purple-40, .pair-purple-50,
+.pair-purple-60, .pair-purple-70, .pair-purple-80, .pair-purple-90, .pair-purple-100,
+.pair-purple-110, .pair-purple-120, .pair-purple-130 { --bgl-pair-tone: var(--bgl-purple); }
+
+.pair-brown,
+.pair-brown-light,
+.pair-brown-10, .pair-brown-20, .pair-brown-30, .pair-brown-40, .pair-brown-50,
+.pair-brown-60, .pair-brown-70, .pair-brown-80, .pair-brown-90, .pair-brown-100,
+.pair-brown-110, .pair-brown-120, .pair-brown-130 { --bgl-pair-tone: var(--bgl-brown); }
+
+.pair-orange,
+.pair-orange-light,
+.pair-orange-10, .pair-orange-20, .pair-orange-30, .pair-orange-40, .pair-orange-50,
+.pair-orange-60, .pair-orange-70, .pair-orange-80, .pair-orange-90, .pair-orange-100,
+.pair-orange-110, .pair-orange-120, .pair-orange-130 { --bgl-pair-tone: var(--bgl-orange); }
+
+.pair-turquoise,
+.pair-turquoise-light,
+.pair-turquoise-10, .pair-turquoise-20, .pair-turquoise-30, .pair-turquoise-40, .pair-turquoise-50,
+.pair-turquoise-60, .pair-turquoise-70, .pair-turquoise-80, .pair-turquoise-90, .pair-turquoise-100,
+.pair-turquoise-110, .pair-turquoise-120, .pair-turquoise-130 { --bgl-pair-tone: var(--bgl-turquoise); }
+
+.pair-pink,
+.pair-pink-light,
+.pair-pink-10, .pair-pink-20, .pair-pink-30, .pair-pink-40, .pair-pink-50,
+.pair-pink-60, .pair-pink-70, .pair-pink-80, .pair-pink-90, .pair-pink-100,
+.pair-pink-110, .pair-pink-120, .pair-pink-130 { --bgl-pair-tone: var(--bgl-pink); }
+
+.pair-gray,
+.pair-gray-light, .pair-gray-tint,
+.pair-gray-10, .pair-gray-20, .pair-gray-30, .pair-gray-40, .pair-gray-50,
+.pair-gray-60, .pair-gray-70, .pair-gray-80, .pair-gray-90, .pair-gray-100,
+.pair-gray-110, .pair-gray-120, .pair-gray-130 { --bgl-pair-tone: var(--bgl-gray); }
+
+.pair-black,
+.pair-black-tint,
+.pair-black-10, .pair-black-20, .pair-black-30, .pair-black-40, .pair-black-50,
+.pair-black-60, .pair-black-70, .pair-black-80, .pair-black-90, .pair-black-100,
+.pair-black-110, .pair-black-120, .pair-black-130 { --bgl-pair-tone: var(--bgl-black); }
+
+.pair-white { --bgl-pair-tone: var(--bgl-white); }
+
+/* 2) SOFT modifier — applies on any element carrying a pair-* class.
+ *    bg ≈ 18% tint, border ≈ full tone, text = full tone. */
+[class*="pair-"].soft {
+	background-color: color-mix(in srgb, var(--bgl-pair-tone) 18%, transparent) !important;
+	color: var(--bgl-pair-tone) !important;
+	border: 1px solid var(--bgl-pair-tone) !important;
+}
+
+/* White is special: a white tone on a light surface needs dark text/border. */
+.pair-white.soft {
+	color: var(--bgl-black) !important;
+	border-color: var(--bgl-black) !important;
+}
+
+/* 3) FROST modifier — translucent + blur, tinted by the pair color.
+ *    Like `soft` but glassier: lower-opacity fill, a blurred backdrop, and a
+ *    faint same-tone border. Shines over photos / gradients / dark heroes.
+ *    Text uses the full tone so it stays legible on the light translucent fill. */
+[class*="pair-"].frost {
+	/* `--bgl-pair-tone` falls back to white so a frost with no color (or before a
+	   tone is mapped) renders as the classic light-on-dark glass. */
+	background-color: color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-white)) 14%, transparent) !important;
+	color: var(--bgl-pair-tone, var(--bgl-white)) !important;
+	border: 1px solid color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-white)) 35%, transparent) !important;
+	backdrop-filter: blur(8px);
+	-webkit-backdrop-filter: blur(8px);
+}
+
+.pair-white.frost {
+	color: var(--bgl-white) !important;
+}
+
+/* 4) GRADIENT modifier — a colored linear gradient + white text.
+ *
+ *  Works two ways, both pure CSS so it applies to <div> as well as components:
+ *
+ *  a) Automatic (just a pair class): sweeps from the tone to a darker shade of
+ *     itself.    <div class="pair-blue gradient">
+ *
+ *  b) Explicit stops: provide --bgl-grad-from / --bgl-grad-via / --bgl-grad-to
+ *     (and optionally --bgl-grad-angle). The Btn/Badge components inject these
+ *     from their `gradient` / `gradient-dir` props, and the existing
+ *     gradients.css utilities (from-*, via-*, to-*, to-tr, …) compose too.
+ *
+ *  The `via` slot collapses to nothing when unset (2-stop), expands when set
+ *  (3-stop) — exactly like gradients.css. */
+[class*="pair-"].gradient {
+	--bgl-grad-default-from: var(--bgl-pair-tone, var(--bgl-primary));
+	--bgl-grad-default-to: color-mix(in srgb, var(--bgl-pair-tone, var(--bgl-primary)) 55%, #000);
+	background-image: linear-gradient(
+		var(--bgl-grad-angle, 135deg),
+		var(--bgl-grad-from, var(--bgl-grad-default-from)),
+		var(--bgl-grad-via, ) var(--bgl-grad-to, var(--bgl-grad-default-to))
+	) !important;
+	color: var(--bgl-white) !important;
+	border: none !important;
+}