@orioncactuscorp/ui 1.4.1 → 1.5.0

package/dist/utils/motion.js

@@ -1,6 +1,7 @@
 import { ocSpring as A } from "./spring.js";
-const y = [
+const f = [
   "feedback",
+  "fade",
   "reject",
   "disclosure",
   "surface",
@@ -32,6 +33,7 @@ const y = [
   },
   durationByIntent: {
     feedback: 0.2,
+    fade: 0.2,
     reject: 0.32,
     disclosure: 0.2,
     surface: 0.26,
@@ -61,6 +63,7 @@ const y = [
   },
   timingByIntent: {
     feedback: "ease",
+    fade: "ease",
     reject: "ease",
     disclosure: "ease",
     surface: "ease",
@@ -90,6 +93,7 @@ const y = [
   }
 }, C = o, L = {
   feedback: "feedback",
+  fade: "fade",
   reject: "feedback",
   disclosure: "fade",
   surface: "fade",
@@ -161,7 +165,7 @@ const y = [
   return !Number.isFinite(s) || s < 0 ? e : a[2] === "ms" ? s / 1e3 : s;
 }, n = (t, e) => typeof t?.getPropertyValue == "function" ? t.getPropertyValue(e).trim() : "", E = (t, e) => {
   const r = { ...t };
-  for (const a of y) {
+  for (const a of f) {
     const s = e?.[a];
     s && (r[a] = {
       ...t[a],
@@ -228,6 +232,10 @@ function N(t) {
         n(e, "--oc-motion-duration-feedback"),
         o.durationByIntent.feedback
       ),
+      fade: i(
+        n(e, "--oc-motion-duration-fade"),
+        o.durationByIntent.fade
+      ),
       reject: i(
         n(e, "--oc-motion-duration-reject"),
         o.durationByIntent.reject
@@ -299,6 +307,7 @@ function N(t) {
     },
     timingByIntent: {
       feedback: n(e, "--oc-motion-timing-feedback") || o.timingByIntent.feedback,
+      fade: n(e, "--oc-motion-timing-fade") || o.timingByIntent.fade,
       reject: n(e, "--oc-motion-timing-reject") || o.timingByIntent.reject,
       disclosure: n(e, "--oc-motion-timing-disclosure") || o.timingByIntent.disclosure,
       surface: n(e, "--oc-motion-timing-surface") || o.timingByIntent.surface,
@@ -329,7 +338,7 @@ function N(t) {
   };
 }
 function T(t, e = "auto") {
-  return l("intent", t, y), l("reduced policy", e, S), e === "auto" ? L[t] : e;
+  return l("intent", t, f), l("reduced policy", e, S), e === "auto" ? L[t] : e;
 }
 function _(t) {
   return V.has(t);
@@ -364,14 +373,14 @@ function Q({
   element: B,
   tokens: D
 }) {
-  l("intent", t, y), l("phase", e, w), l("pace", r, R);
+  l("intent", t, f), l("phase", e, w), l("pace", r, R);
   const x = G(a), P = H(s), u = K(
     D ?? N(B)
-  ), f = T(t, m), b = j({
+  ), y = T(t, m), b = j({
     property: p,
     reducedMotion: c,
-    reducedPolicy: f
-  }), F = c && f === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor, I = O(
+    reducedPolicy: y
+  }), F = c && y === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor, I = O(
     u.durationByPhase,
     t,
     e,
@@ -397,7 +406,7 @@ function Q({
     phase: e,
     pace: r,
     reduced: m,
-    reducedPolicy: f,
+    reducedPolicy: y,
     reducedMotion: c,
     property: p,
     durationFactor: x,
@@ -414,7 +423,7 @@ function Q({
   };
 }
 const X = {
-  intents: y,
+  intents: f,
   phases: w,
   paces: R,
   reducedPolicies: S,
@@ -430,7 +439,7 @@ export {
   _ as isOcMotionFeedbackSafeProperty,
   X as ocMotion,
   C as ocMotionDefaultTokens,
-  y as ocMotionIntents,
+  f as ocMotionIntents,
   R as ocMotionPaces,
   w as ocMotionPhases,
   S as ocMotionReducedPolicies,

package/dist/vscode/oc-ui-vars.css

@@ -303,6 +303,7 @@
   --oc-motion-duration-factor: initial;
   --oc-motion-duration-factor-preserve: initial;
   --oc-motion-duration-factor-reduced: initial;
+  --oc-motion-duration-fade: initial;
   --oc-motion-duration-feedback: initial;
   --oc-motion-duration-gesture: initial;
   --oc-motion-duration-gesture-release: initial;
@@ -324,6 +325,7 @@
   --oc-motion-timing-disclosure-exit: initial;
   --oc-motion-timing-expand: initial;
   --oc-motion-timing-expand-exit: initial;
+  --oc-motion-timing-fade: initial;
   --oc-motion-timing-feedback: initial;
   --oc-motion-timing-gesture: initial;
   --oc-motion-timing-gesture-release: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orioncactuscorp/ui",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "orioncactus UI foundations and core primitives",
   "private": false,
   "type": "module",

package/src/scss/foundations/motion.scss

@@ -16,6 +16,7 @@
   --oc-motion-pace-normal: 1;
   --oc-motion-pace-slow: 1.35;
   --oc-motion-duration-feedback: 0.2s;
+  --oc-motion-duration-fade: 0.2s;
   --oc-motion-duration-reject: #{oc-spring-settle-duration(0.32s, smooth)};
   --oc-motion-duration-disclosure: 0.2s;
   --oc-motion-duration-disclosure-exit: 0.14s;
@@ -31,6 +32,7 @@
   --oc-motion-duration-gesture-release: 0.52s;
   --oc-motion-duration-ambient: 1.2s;
   --oc-motion-timing-feedback: ease;
+  --oc-motion-timing-fade: ease;
   --oc-motion-timing-reject: #{oc-spring-timing(0.32s, smooth, $samples: 64)};
   --oc-motion-timing-disclosure: ease;
   --oc-motion-timing-disclosure-exit: cubic-bezier(0.8, 0, 1, 1);

package/src/scss/mixins/_motion.scss

@@ -7,6 +7,7 @@
 // CSS-token tables keep non-spring transitions and reduced-motion output themeable.
 $oc-motion-token-duration-by-intent: (
   feedback: var(--oc-motion-duration-feedback),
+  fade: var(--oc-motion-duration-fade),
   reject: var(--oc-motion-duration-reject),
   disclosure: var(--oc-motion-duration-disclosure),
   surface: var(--oc-motion-duration-surface),
@@ -19,6 +20,7 @@ $oc-motion-token-duration-by-intent: (
 
 $oc-motion-token-timing-by-intent: (
   feedback: var(--oc-motion-timing-feedback),
+  fade: var(--oc-motion-timing-fade),
   reject: var(--oc-motion-timing-reject),
   disclosure: var(--oc-motion-timing-disclosure),
   surface: var(--oc-motion-timing-surface),
@@ -73,8 +75,11 @@ $oc-motion-token-pace-factor: (
   slow: var(--oc-motion-pace-slow),
 ) !default;
 
+// Amplitude maps accept every intent for vocabulary completeness; fade remains
+// an opacity-first contract even though custom transforms can share spatial factors.
 $oc-motion-token-scale-by-intent: (
   feedback: var(--oc-motion-scale-factor-feedback),
+  fade: var(--oc-motion-scale-factor-spatial),
   reject: var(--oc-motion-scale-factor-feedback),
   disclosure: var(--oc-motion-scale-factor-spatial),
   surface: var(--oc-motion-scale-factor-spatial),
@@ -87,6 +92,7 @@ $oc-motion-token-scale-by-intent: (
 
 $oc-motion-token-distance-by-intent: (
   feedback: var(--oc-motion-distance-factor-reject),
+  fade: var(--oc-motion-distance-factor-spatial),
   reject: var(--oc-motion-distance-factor-reject),
   disclosure: var(--oc-motion-distance-factor-spatial),
   surface: var(--oc-motion-distance-factor-spatial),
@@ -100,6 +106,7 @@ $oc-motion-token-distance-by-intent: (
 // Spring profiles need compile-time Sass values because oc-spring() samples timing curves.
 $oc-motion-spring-duration-by-intent: (
   feedback: 0.2s,
+  fade: 0.2s,
   reject: 0.32s,
   disclosure: 0.2s,
   surface: 0.26s,
@@ -203,6 +210,7 @@ $oc-motion-spring-by-intent: (
 
 $oc-motion-reduced-policy-by-intent: (
   feedback: feedback,
+  fade: fade,
   reject: feedback,
   disclosure: fade,
   surface: fade,

package/src/scss/mixins/_motion.test.ts

@@ -44,6 +44,27 @@ describe('motion utilities', () => {
     );
   });
 
+  it('emits token-backed fade motion for simple opacity transitions', () => {
+    const result = compileMotion(`
+      .target {
+        @include oc-motion(opacity, fade);
+      }
+    `);
+
+    expect(result.css).toContain(
+      'transition: opacity calc(var(--oc-motion-duration-fade) * var(--oc-motion-duration-factor) * var(--oc-motion-pace-normal) * 1) var(--oc-motion-timing-fade);',
+    );
+    expect(result.css).toContain('@media (prefers-reduced-motion: reduce)');
+    expect(result.css).toContain('transition-property: opacity;');
+    expect(result.css).toContain(
+      'transition-duration: calc(var(--oc-motion-duration-fade) * var(--oc-motion-duration-factor-reduced) * var(--oc-motion-pace-normal) * 1);',
+    );
+    expect(result.css).toContain(
+      'transition-timing-function: var(--oc-motion-timing-fade);',
+    );
+    expect(result.css).not.toContain('linear(');
+  });
+
   it('scales transform amplitude through motion scale factor tokens', () => {
     const result = compileMotion(`
       .feedback {