@bagelink/vue 1.15.71 → 1.15.75

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;
+}