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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/visuals",
     "description": "Visual effect components for the Flux UI library.",
-    "version": "3.13.0",
+    "version": "4.0.0-beta.0",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -23,7 +23,7 @@
         "visuals"
     ],
     "scripts": {
-        "build": "vue-tsc && vite build",
+        "build": "vue-tsc --build && vite build",
         "dev": "vite build --watch --mode development"
     },
     "engines": {
@@ -50,22 +50,22 @@
     "dependencies": {
         "@basmilius/common": "^3.55.0",
         "@basmilius/utils": "^3.55.0",
-        "@flux-ui/internals": "3.13.0",
-        "@flux-ui/types": "3.13.0",
+        "@flux-ui/internals": "4.0.0-beta.0",
+        "@flux-ui/types": "4.0.0-beta.0",
         "clsx": "^2.1.1",
         "rough-notation": "^0.5.1"
     },
     "peerDependencies": {
-        "vue": "^3.6.0-rc.1"
+        "vue": "^3.6.0-rc.2"
     },
     "devDependencies": {
         "@basmilius/vite-preset": "^3.55.0",
-        "@types/node": "^26.1.1",
+        "@types/node": "^26.1.2",
         "@vitejs/plugin-vue": "^6.0.8",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "6.0.3",
         "vite": "^8.1.5",
-        "vue-tsc": "^3.3.7"
+        "vue-tsc": "^3.3.8"
     }
 }

package/src/component/FluxVisualHighlighter.vue

@@ -57,7 +57,7 @@
     const inView = group ? shallowRef(true) : useInView(targetRef, {initial: !whenInView});
 
     const effectiveVariant = computed(() => variant ?? group?.defaults.variant ?? 'highlight');
-    const effectiveColor = computed(() => color ?? group?.defaults.color ?? 'var(--warning-200)');
+    const effectiveColor = computed(() => color ?? group?.defaults.color ?? 'var(--warning-border)');
     const effectiveStrokeWidth = computed(() => strokeWidth ?? group?.defaults.strokeWidth ?? 1.5);
     const effectiveAnimationDuration = computed(() => animationDuration ?? group?.defaults.animationDuration ?? 500);
     const effectiveIterations = computed(() => iterations ?? group?.defaults.iterations ?? 2);

package/src/component/FluxVisualNumberFlow.vue

@@ -48,7 +48,7 @@
 
     const CUBIC_BEZIER_PATTERN = /^cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)$/;
 
-    // Fallback for an unrecognised easing value, matching the --swift-out default.
+    // Fallback for an unrecognized easing value, matching the --swift-out default.
     const swiftOutEasing = cubicBezier(0.55, 0, 0.1, 1);
 
     const labelRef = useTemplateRef('label');

package/src/component/FluxVisualPing.vue

@@ -3,7 +3,7 @@
         aria-hidden="true"
         :class="$style.ping"
         :style="{
-            '--ping-color': `var(--${color}-500)`,
+            '--ping-color': `var(--${color}-solid)`,
             '--ping-size': `${size}px`,
             '--ping-duration': duration
         }"/>

package/src/component/FluxVisualSlotText.vue

@@ -276,7 +276,7 @@
 
             // Resize the cell to the new glyph — but ease the width instead of
             // snapping it, so a wide outgoing glyph is never cropped by a
-            // suddenly-narrow cell and neighbours glide rather than jump.
+            // suddenly-narrow cell and neighbors glide rather than jump.
             const oldW = slot.getBoundingClientRect().width;
             sizer.textContent = glyph(toChar);
             const newW = sizer.getBoundingClientRect().width;
@@ -288,7 +288,7 @@
 
             // A cell growing from or collapsing to empty changes width
             // drastically — clip it horizontally while it resizes so its glyph
-            // wipes in/out with the cell instead of stacking onto the neighbours.
+            // wipes in/out with the cell instead of stacking onto the neighbors.
             if (fromChar === '' || toChar === '') {
                 slot.classList.add($style.isResizing);
             }
@@ -366,7 +366,7 @@
 
                 const done = (event: TransitionEvent): void => {
                     if (event.propertyName !== 'transform') {
-                        return; // ignore the colour fade
+                        return; // ignore the color fade
                     }
 
                     newFace.removeEventListener('transitionend', done);

package/src/css/component/Noise.module.scss

@@ -8,8 +8,8 @@
     // Raw feTurbulence emits four independent noise channels, so the alpha is
     // also noise and the grain is a faint, half-transparent colored static that
     // washes out to nothing under a low opacity. The filter runs in sRGB (so the
-    // grain stays centered on mid-grey instead of being gamma-lifted toward
-    // white), collapses to a single opaque grey channel and boosts its contrast,
+    // grain stays centered on mid-gray instead of being gamma-lifted toward
+    // white), collapses to a single opaque gray channel and boosts its contrast,
     // giving a neutral film grain that reads clearly even at a few percent.
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
     background-repeat: repeat;

package/src/css/component/PatternGlow.module.scss

@@ -11,9 +11,9 @@
 }
 
 .glowDot {
-    fill: var(--primary-500);
+    fill: var(--primary-solid);
 }
 
 .glowLine {
-    stroke: var(--primary-500);
+    stroke: var(--primary-solid);
 }

package/src/css/component/SlotText.module.scss

@@ -22,7 +22,7 @@
 
 // Cells appearing from or collapsing to empty change width drastically, so clip
 // them horizontally too while they resize — their glyph wipes in/out with the
-// cell instead of spilling over the neighbours.
+// cell instead of spilling over the neighbors.
 .charSlot.isResizing {
     overflow-x: clip;
 }

package/src/css/component/TextShimmer.module.scss

@@ -4,9 +4,9 @@
     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%)
+        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%)
     );
     // Both edges of the gradient are the base color, so tiling it seamlessly
     // keeps the text fully painted at every step: outside the moving highlight
@@ -21,20 +21,11 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 
-    [dark] & {
-        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%)
-        );
-    }
-
     // No sweep when reduced motion is requested: fall back to a plain, solid
     // text color so the label stays legible without animating.
     @media (prefers-reduced-motion: reduce) {
         animation: none;
-        color: var(--shimmer-base, var(--gray-500));
+        color: var(--shimmer-base, var(--foreground-subtle));
         background: none;
         -webkit-text-fill-color: currentColor;
     }

package/src/css/component/Visual.module.scss

@@ -20,7 +20,7 @@
 .dotPattern {
     composes: fillVisual;
 
-    fill: var(--gray-300);
+    fill: var(--surface-stroke-hover);
     pointer-events: none;
 }
 
@@ -33,8 +33,8 @@
 .gridPattern {
     composes: fillVisual;
 
-    fill: var(--gray-100);
-    stroke: var(--gray-300);
+    fill: var(--surface-stroke-muted);
+    stroke: var(--surface-stroke-hover);
     pointer-events: none;
 }