@flux-ui/visuals 3.13.0 → 4.0.0-beta.0

package/dist/index.css

@@ -15,7 +15,7 @@
 }
 
 .dot-pattern {
-  fill: var(--gray-300);
+  fill: var(--surface-stroke-hover);
   pointer-events: none;
 }
 
@@ -24,8 +24,8 @@
 }
 
 .grid-pattern {
-  fill: var(--gray-100);
-  stroke: var(--gray-300);
+  fill: var(--surface-stroke-muted);
+  stroke: var(--surface-stroke-hover);
   pointer-events: none;
 }
 
@@ -925,11 +925,11 @@
 }
 
 .glow-dot {
-  fill: var(--primary-500);
+  fill: var(--primary-solid);
 }
 
 .glow-line {
-  stroke: var(--primary-500);
+  stroke: var(--primary-solid);
 }.highlighter {
   position: relative;
 }
@@ -1120,7 +1120,7 @@
   display: inline-block;
   animation: text-shimmer-sweep var(--shimmer-duration, 2s) linear infinite;
   color: transparent;
-  background-image: linear-gradient(90deg, var(--shimmer-base, var(--gray-400)) calc(50% - var(--shimmer-spread, 15) * 1%), var(--shimmer-color, var(--gray-950)) 50%, var(--shimmer-base, var(--gray-400)) calc(50% + var(--shimmer-spread, 15) * 1%));
+  background-image: linear-gradient(90deg, var(--shimmer-base, var(--foreground-subtle)) calc(50% - var(--shimmer-spread, 15) * 1%), var(--shimmer-color, var(--foreground-prominent)) 50%, var(--shimmer-base, var(--foreground-subtle)) calc(50% + var(--shimmer-spread, 15) * 1%));
   background-repeat: repeat;
   background-position: 100% center;
   background-clip: text;
@@ -1128,13 +1128,10 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-[dark] .text-shimmer {
-  background-image: linear-gradient(90deg, var(--shimmer-base, var(--gray-500)) calc(50% - var(--shimmer-spread, 15) * 1%), var(--shimmer-color, var(--gray-50)) 50%, var(--shimmer-base, var(--gray-500)) calc(50% + var(--shimmer-spread, 15) * 1%));
-}
 @media (prefers-reduced-motion: reduce) {
   .text-shimmer {
     animation: none;
-    color: var(--shimmer-base, var(--gray-500));
+    color: var(--shimmer-base, var(--foreground-subtle));
     background: none;
     -webkit-text-fill-color: currentColor;
   }

package/dist/index.js

@@ -910,7 +910,7 @@ var convertLchToLab = ({ l, c, h, alpha }, mode = "lab") => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz65/constants.js
-var k$3 = Math.pow(29, 3) / Math.pow(3, 3);
+var k$2 = Math.pow(29, 3) / Math.pow(3, 3);
 var e$3 = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/constants.js
@@ -928,7 +928,7 @@ Math.pow(29, 3) / Math.pow(3, 3);
 Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertLab65ToXyz65.js
-var fn$1 = (v) => Math.pow(v, 3) > e$3 ? Math.pow(v, 3) : (116 * v - 16) / k$3;
+var fn$1 = (v) => Math.pow(v, 3) > e$3 ? Math.pow(v, 3) : (116 * v - 16) / k$2;
 var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -950,7 +950,7 @@ var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 var convertLab65ToRgb = (lab) => convertXyz65ToRgb(convertLab65ToXyz65(lab));
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertXyz65ToLab65.js
-var f$2 = (value) => value > e$3 ? Math.cbrt(value) : (k$3 * value + 16) / 116;
+var f$2 = (value) => value > e$3 ? Math.cbrt(value) : (k$2 * value + 16) / 116;
 var convertXyz65ToLab65 = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -1812,11 +1812,11 @@ var definition$16 = {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz50/constants.js
-var k$1 = Math.pow(29, 3) / Math.pow(3, 3);
+var k = Math.pow(29, 3) / Math.pow(3, 3);
 var e$1 = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertLabToXyz50.js
-var fn = (v) => Math.pow(v, 3) > e$1 ? Math.pow(v, 3) : (116 * v - 16) / k$1;
+var fn = (v) => Math.pow(v, 3) > e$1 ? Math.pow(v, 3) : (116 * v - 16) / k;
 var convertLabToXyz50 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -1865,7 +1865,7 @@ var convertRgbToXyz50 = (rgb) => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertXyz50ToLab.js
-var f$1 = (value) => value > e$1 ? Math.cbrt(value) : (k$1 * value + 16) / 116;
+var f$1 = (value) => value > e$1 ? Math.cbrt(value) : (k * value + 16) / 116;
 var convertXyz50ToLab = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2071,7 +2071,7 @@ var u_fn$1 = (x, y, z) => 4 * x / (x + 15 * y + 3 * z);
 var v_fn$1 = (x, y, z) => 9 * y / (x + 15 * y + 3 * z);
 var un$1 = u_fn$1(D50.X, D50.Y, D50.Z);
 var vn$1 = v_fn$1(D50.X, D50.Y, D50.Z);
-var l_fn = (value) => value <= e$1 ? k$1 * value : 116 * Math.cbrt(value) - 16;
+var l_fn = (value) => value <= e$1 ? k * value : 116 * Math.cbrt(value) - 16;
 var convertXyz50ToLuv = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2111,7 +2111,7 @@ var convertLuvToXyz50 = ({ l, u, v, alpha }) => {
 	if (v === void 0) v = 0;
 	let up = u / (13 * l) + un;
 	let vp = v / (13 * l) + vn;
-	let y = D50.Y * (l <= 8 ? l / k$1 : Math.pow((l + 16) / 116, 3));
+	let y = D50.Y * (l <= 8 ? l / k : Math.pow((l + 16) / 116, 3));
 	let res = {
 		mode: "xyz50",
 		x: y * (9 * up) / (4 * vp),
@@ -9331,7 +9331,7 @@ function K(e, t, n) {
 	Object.defineProperty(e, t, { value: n });
 }
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.55.0+5b14057fc6050d41/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.55.0+cdb470e444abca7f/node_modules/@basmilius/http-client/dist/index.mjs
 function adapter_default(Parent) {
 	return class extends Parent {
 		constructor(...args) {
@@ -9908,8 +9908,8 @@ new class {
 }();
 globalThis.document;
 //#endregion
-//#region ../internals/dist/composable-Cr4VA1Rs.js
-function k(t, n = {}) {
+//#region ../internals/dist/composable-Ddn-evA6.js
+function F(t, n = {}) {
 	let r = ref(n.initial ?? !1);
 	return watch(t, (i, a, o) => {
 		let s = y(t);
@@ -9950,7 +9950,7 @@ var FluxVisualAnimatedColors_default = /* @__PURE__ */ defineComponent({
 		const tick = ref(0);
 		const size = ref(null);
 		const componentId = de();
-		const inView = k(canvasRef, { initial: true });
+		const inView = F(canvasRef, { initial: true });
 		const reducedMotion = v();
 		const polygons = computed(() => {
 			if (!__props.colors || __props.colors.length === 0) return [];
@@ -11094,7 +11094,7 @@ var FluxVisualBorderBeam_default = /* @__PURE__ */ defineComponent({
 			"pulse-outside": BorderBeam_module_default.pulseOutside
 		};
 		const wrapperRef = useTemplateRef("wrapper");
-		const inView = k(wrapperRef, {
+		const inView = F(wrapperRef, {
 			initial: true,
 			rootMargin: "256px"
 		});
@@ -11354,7 +11354,7 @@ var FluxVisualFlickeringGrid_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const canvasRef = useTemplateRef("canvas");
-		const inView = k(canvasRef);
+		const inView = F(canvasRef);
 		const mulberry = V(13);
 		const rgb = computed(() => {
 			const canvas = document.createElement("canvas");
@@ -11594,9 +11594,9 @@ var FluxVisualHighlighter_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const targetRef = useTemplateRef("target");
 		const group = useHighlighterGroupInjection();
-		const inView = group ? shallowRef(true) : k(targetRef, { initial: !__props.whenInView });
+		const inView = group ? shallowRef(true) : F(targetRef, { initial: !__props.whenInView });
 		const effectiveVariant = computed(() => __props.variant ?? group?.defaults.variant ?? "highlight");
-		const effectiveColor = computed(() => __props.color ?? group?.defaults.color ?? "var(--warning-200)");
+		const effectiveColor = computed(() => __props.color ?? group?.defaults.color ?? "var(--warning-border)");
 		const effectiveStrokeWidth = computed(() => __props.strokeWidth ?? group?.defaults.strokeWidth ?? 1.5);
 		const effectiveAnimationDuration = computed(() => __props.animationDuration ?? group?.defaults.animationDuration ?? 500);
 		const effectiveIterations = computed(() => __props.iterations ?? group?.defaults.iterations ?? 2);
@@ -11980,7 +11980,7 @@ var FluxVisualPing_default = /* @__PURE__ */ defineComponent({
 				"aria-hidden": "true",
 				class: normalizeClass(unref(Ping_module_default).ping),
 				style: normalizeStyle({
-					"--ping-color": `var(--${__props.color}-500)`,
+					"--ping-color": `var(--${__props.color}-solid)`,
 					"--ping-size": `${__props.size}px`,
 					"--ping-duration": __props.duration
 				})