@orioncactuscorp/ui 1.2.0 → 1.4.0

package/src/scss/mixins/_motion.scss

@@ -8,7 +8,10 @@
 $oc-motion-token-duration-by-intent: (
   feedback: var(--oc-motion-duration-feedback),
   reject: var(--oc-motion-duration-reject),
-  reveal: var(--oc-motion-duration-reveal),
+  disclosure: var(--oc-motion-duration-disclosure),
+  surface: var(--oc-motion-duration-surface),
+  sheet: var(--oc-motion-duration-sheet),
+  expand: var(--oc-motion-duration-expand),
   move: var(--oc-motion-duration-move),
   gesture: var(--oc-motion-duration-gesture),
   ambient: var(--oc-motion-duration-ambient),
@@ -17,82 +20,120 @@ $oc-motion-token-duration-by-intent: (
 $oc-motion-token-timing-by-intent: (
   feedback: var(--oc-motion-timing-feedback),
   reject: var(--oc-motion-timing-reject),
-  reveal: var(--oc-motion-timing-reveal),
+  disclosure: var(--oc-motion-timing-disclosure),
+  surface: var(--oc-motion-timing-surface),
+  sheet: var(--oc-motion-timing-sheet),
+  expand: var(--oc-motion-timing-expand),
   move: var(--oc-motion-timing-move),
   gesture: var(--oc-motion-timing-gesture),
   ambient: var(--oc-motion-timing-ambient),
 ) !default;
 
 $oc-motion-token-duration-by-phase: (
-  reveal: (
-    exit: var(--oc-motion-duration-reveal-exit),
+  disclosure: (
+    exit: var(--oc-motion-duration-disclosure-exit),
+  ),
+  surface: (
+    exit: var(--oc-motion-duration-surface-exit),
+  ),
+  sheet: (
+    exit: var(--oc-motion-duration-sheet-exit),
+    release: var(--oc-motion-duration-sheet-release),
+  ),
+  expand: (
+    exit: var(--oc-motion-duration-expand-exit),
   ),
   gesture: (
-    settle: var(--oc-motion-duration-gesture-settle),
+    release: var(--oc-motion-duration-gesture-release),
   ),
 ) !default;
 
 $oc-motion-token-timing-by-phase: (
-  reveal: (
-    exit: var(--oc-motion-timing-reveal-exit),
+  disclosure: (
+    exit: var(--oc-motion-timing-disclosure-exit),
+  ),
+  surface: (
+    exit: var(--oc-motion-timing-surface-exit),
+  ),
+  sheet: (
+    exit: var(--oc-motion-timing-sheet-exit),
+    release: var(--oc-motion-timing-sheet-release),
+  ),
+  expand: (
+    exit: var(--oc-motion-timing-expand-exit),
   ),
   gesture: (
-    settle: var(--oc-motion-timing-gesture-settle),
+    release: var(--oc-motion-timing-gesture-release),
   ),
 ) !default;
 
-$oc-motion-token-pace-scale: (
+$oc-motion-token-pace-factor: (
   quick: var(--oc-motion-pace-quick),
   normal: var(--oc-motion-pace-normal),
   slow: var(--oc-motion-pace-slow),
 ) !default;
 
 $oc-motion-token-scale-by-intent: (
-  feedback: var(--oc-motion-scale-feedback),
-  reject: var(--oc-motion-scale-feedback),
-  reveal: var(--oc-motion-scale-reveal),
-  move: var(--oc-motion-scale-reveal),
-  gesture: var(--oc-motion-scale-feedback),
-  ambient: var(--oc-motion-scale-feedback),
+  feedback: var(--oc-motion-scale-factor-feedback),
+  reject: var(--oc-motion-scale-factor-feedback),
+  disclosure: var(--oc-motion-scale-factor-spatial),
+  surface: var(--oc-motion-scale-factor-spatial),
+  sheet: var(--oc-motion-scale-factor-spatial),
+  expand: var(--oc-motion-scale-factor-spatial),
+  move: var(--oc-motion-scale-factor-spatial),
+  gesture: var(--oc-motion-scale-factor-feedback),
+  ambient: var(--oc-motion-scale-factor-feedback),
 ) !default;
 
 $oc-motion-token-distance-by-intent: (
-  feedback: var(--oc-motion-distance-scale-reject),
-  reject: var(--oc-motion-distance-scale-reject),
-  reveal: var(--oc-motion-distance-scale-reveal),
-  move: var(--oc-motion-distance-scale-reveal),
-  gesture: var(--oc-motion-distance-scale-reject),
-  ambient: var(--oc-motion-distance-scale-reveal),
+  feedback: var(--oc-motion-distance-factor-reject),
+  reject: var(--oc-motion-distance-factor-reject),
+  disclosure: var(--oc-motion-distance-factor-spatial),
+  surface: var(--oc-motion-distance-factor-spatial),
+  sheet: var(--oc-motion-distance-factor-spatial),
+  expand: var(--oc-motion-distance-factor-spatial),
+  move: var(--oc-motion-distance-factor-spatial),
+  gesture: var(--oc-motion-distance-factor-reject),
+  ambient: var(--oc-motion-distance-factor-spatial),
 ) !default;
 
 // Spring profiles need compile-time Sass values because oc-spring() samples timing curves.
 $oc-motion-spring-duration-by-intent: (
   feedback: 0.2s,
   reject: 0.32s,
-  reveal: 0.3s,
+  disclosure: 0.2s,
+  surface: 0.26s,
+  sheet: 0.26s,
+  expand: 0.3s,
   move: 0.3s,
   gesture: 0.2s,
   ambient: 1.2s,
 ) !default;
 
 $oc-motion-spring-duration-by-phase: (
-  reveal: (
-    exit: 0.125s,
+  disclosure: (
+    exit: 0.14s,
+  ),
+  surface: (
+    exit: 0.24s,
+  ),
+  sheet: (
+    exit: 0.33s,
+    release: 0.33s,
+  ),
+  expand: (
+    exit: 0.24s,
+  ),
+  gesture: (
+    release: 0.52s,
   ),
 ) !default;
 
-$oc-motion-phases: (change, enter, exit, settle, loop) !default;
+$oc-motion-phases: (change, enter, exit, release, loop) !default;
 $oc-motion-reduced-policies: (auto, preserve, fade, static, feedback) !default;
 
 // Intent-level spring profiles preserve component motion quality without raw oc-spring() calls in components.
 $oc-motion-spring-by-intent: (
-  feedback: (
-    phases: (
-      settle,
-    ),
-    preset: snappy,
-    extra-bounce: 0,
-  ),
   reject: (
     phases: (
       change,
@@ -101,7 +142,7 @@ $oc-motion-spring-by-intent: (
     preset: smooth,
     extra-bounce: 0,
   ),
-  reveal: (
+  disclosure: (
     preset: smooth,
     extra-bounce: 0,
     phases: (
@@ -112,7 +153,7 @@ $oc-motion-spring-by-intent: (
           transform: snappy,
         ),
         property-extra-bounce: (
-          transform: 0.1,
+          transform: 0.04,
         ),
       ),
       enter: (
@@ -122,15 +163,35 @@ $oc-motion-spring-by-intent: (
           transform: snappy,
         ),
         property-extra-bounce: (
-          transform: 0.1,
+          transform: 0.04,
         ),
       ),
+      exit: null,
     ),
   ),
+  surface: (
+    preset: smooth,
+    extra-bounce: 0,
+  ),
+  sheet: (
+    preset: smooth,
+    extra-bounce: 0,
+  ),
+  expand: (
+    preset: smooth,
+    extra-bounce: 0,
+  ),
   move: (
     preset: smooth,
     extra-bounce: 0,
   ),
+  gesture: (
+    phases: (
+      release,
+    ),
+    preset: snappy,
+    extra-bounce: 0,
+  ),
   ambient: (
     phases: (
       loop,
@@ -143,7 +204,10 @@ $oc-motion-spring-by-intent: (
 $oc-motion-reduced-policy-by-intent: (
   feedback: feedback,
   reject: feedback,
-  reveal: fade,
+  disclosure: fade,
+  surface: fade,
+  sheet: static,
+  expand: static,
   move: static,
   gesture: feedback,
   ambient: static,
@@ -159,21 +223,33 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
   @return $intent;
 }
 
-@function _oc-motion-require-duration-scale($duration-scale) {
-  @if meta.type-of($duration-scale) != 'number' or not math.is-unitless($duration-scale) {
-    @error 'oc-motion $duration-scale must be a unitless number.';
+@function _oc-motion-require-duration-factor($duration-factor) {
+  @if meta.type-of($duration-factor) != 'number' or not math.is-unitless($duration-factor) {
+    @error 'oc-motion $duration-factor must be a unitless number.';
+  }
+
+  @if $duration-factor < 0 {
+    @error 'oc-motion $duration-factor must be greater than or equal to 0.';
+  }
+
+  @return $duration-factor;
+}
+
+@function _oc-motion-require-extra-bounce($extra-bounce) {
+  @if $extra-bounce == null {
+    @return null;
   }
 
-  @if $duration-scale < 0 {
-    @error 'oc-motion $duration-scale must be greater than or equal to 0.';
+  @if meta.type-of($extra-bounce) != 'number' or not math.is-unitless($extra-bounce) {
+    @error 'oc-motion $extra-bounce must be a unitless number.';
   }
 
-  @return $duration-scale;
+  @return $extra-bounce;
 }
 
 @function _oc-motion-require-phase($phase) {
   @if list.index($oc-motion-phases, $phase) == null {
-    @error 'Unknown oc-motion phase: #{$phase}. Use change, enter, exit, settle, or loop.';
+    @error 'Unknown oc-motion phase: #{$phase}. Use change, enter, exit, release, or loop.';
   }
 
   @return $phase;
@@ -187,12 +263,12 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
   @return $reduced;
 }
 
-@function _oc-motion-token-pace-scale($pace) {
-  @if not map.has-key($oc-motion-token-pace-scale, $pace) {
+@function _oc-motion-token-pace-factor($pace) {
+  @if not map.has-key($oc-motion-token-pace-factor, $pace) {
     @error 'Unknown oc-motion pace: #{$pace}. Use quick, normal, or slow.';
   }
 
-  @return map.get($oc-motion-token-pace-scale, $pace);
+  @return map.get($oc-motion-token-pace-factor, $pace);
 }
 
 @function _oc-motion-require-scale-value($scale) {
@@ -275,7 +351,13 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
 
   @if meta.type-of($phases) == 'map' {
     @if map.has-key($phases, $phase) {
-      @return map.merge($config, map.get($phases, $phase));
+      $phase-config: map.get($phases, $phase);
+
+      @if $phase-config == null {
+        @return null;
+      }
+
+      @return map.merge($config, $phase-config);
     }
 
     @return $config;
@@ -288,7 +370,11 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
   @return null;
 }
 
-@function _oc-motion-spring-extra-bounce($config, $property) {
+@function _oc-motion-spring-extra-bounce($config, $property, $extra-bounce) {
+  @if $extra-bounce != null {
+    @return $extra-bounce;
+  }
+
   $property-extra-bounce: map.get($config, property-extra-bounce);
 
   @if $property-extra-bounce != null and map.has-key($property-extra-bounce, $property) {
@@ -308,31 +394,31 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
   @return map.get($config, preset);
 }
 
-@function _oc-motion-spring-transition-item($property, $spring-duration, $config, $pace, $duration-scale) {
+@function _oc-motion-spring-transition-item($property, $spring-duration, $config, $pace, $duration-factor, $extra-bounce) {
   $preset: _oc-motion-spring-preset($config, $property);
-  $extra-bounce: _oc-motion-spring-extra-bounce($config, $property);
-  $settle-duration: oc-spring-settle-duration($spring-duration, $preset, $extra-bounce);
-  $duration: calc(#{$settle-duration} * var(--oc-motion-duration-scale) * #{_oc-motion-token-pace-scale($pace)} * #{$duration-scale});
-  $timing: oc-spring-timing($spring-duration, $preset, $extra-bounce);
+  $spring-extra-bounce: _oc-motion-spring-extra-bounce($config, $property, $extra-bounce);
+  $settle-duration: oc-spring-settle-duration($spring-duration, $preset, $spring-extra-bounce);
+  $duration: calc(#{$settle-duration} * var(--oc-motion-duration-factor) * #{_oc-motion-token-pace-factor($pace)} * #{$duration-factor});
+  $timing: oc-spring-timing($spring-duration, $preset, $spring-extra-bounce);
 
   @return _oc-motion-transition-item($property, $duration, $timing);
 }
 
-@function _oc-motion-spring($properties, $intent, $phase, $pace, $duration-scale, $config) {
+@function _oc-motion-spring($properties, $intent, $phase, $pace, $duration-factor, $config, $extra-bounce) {
   $spring-duration: _oc-motion-spring-duration-value($intent, $phase);
   $transitions: ();
 
   @each $property in _oc-motion-properties($properties) {
-    $transitions: list.append($transitions, _oc-motion-spring-transition-item($property, $spring-duration, $config, $pace, $duration-scale), $separator: comma);
+    $transitions: list.append($transitions, _oc-motion-spring-transition-item($property, $spring-duration, $config, $pace, $duration-factor, $extra-bounce), $separator: comma);
   }
 
   @return $transitions;
 }
 
-@function oc-motion-duration($intent, $phase: change, $pace: normal, $duration-scale: 1, $duration-scale-token: var(--oc-motion-duration-scale), $duration-token: null) {
+@function oc-motion-duration($intent, $phase: change, $pace: normal, $duration-factor: 1, $duration-factor-token: var(--oc-motion-duration-factor), $duration-token: null) {
   $intent: _oc-motion-require-intent($intent);
   $phase: _oc-motion-require-phase($phase);
-  $duration-scale: _oc-motion-require-duration-scale($duration-scale);
+  $duration-factor: _oc-motion-require-duration-factor($duration-factor);
   $base-duration: map.get($oc-motion-token-duration-by-intent, $intent);
   $duration: $duration-token;
 
@@ -340,9 +426,9 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
     $duration: _oc-motion-phase-value($oc-motion-token-duration-by-phase, $intent, $phase, $base-duration);
   }
 
-  $pace-scale: _oc-motion-token-pace-scale($pace);
+  $pace-factor: _oc-motion-token-pace-factor($pace);
 
-  @return calc(#{$duration} * #{$duration-scale-token} * #{$pace-scale} * #{$duration-scale});
+  @return calc(#{$duration} * #{$duration-factor-token} * #{$pace-factor} * #{$duration-factor});
 }
 
 @function oc-motion-timing($intent, $phase: change) {
@@ -353,31 +439,32 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
   @return _oc-motion-phase-value($oc-motion-token-timing-by-phase, $intent, $phase, $base-timing);
 }
 
-@function oc-motion-scale($scale, $intent: feedback, $scale-token: null) {
+@function oc-motion-scale($scale, $intent: feedback, $scale-factor-token: null) {
   $intent: _oc-motion-require-intent($intent);
   $scale: _oc-motion-require-scale-value($scale);
 
-  @if $scale-token == null {
-    $scale-token: map.get($oc-motion-token-scale-by-intent, $intent);
+  @if $scale-factor-token == null {
+    $scale-factor-token: map.get($oc-motion-token-scale-by-intent, $intent);
   }
 
-  @return max(0, calc(1 + (#{$scale} - 1) * #{$scale-token}));
+  @return max(0, calc(1 + (#{$scale} - 1) * #{$scale-factor-token}));
 }
 
-@function oc-motion-distance($distance, $intent: reveal, $distance-token: null) {
+@function oc-motion-distance($distance, $intent, $distance-factor-token: null) {
   $intent: _oc-motion-require-intent($intent);
 
-  @if $distance-token == null {
-    $distance-token: map.get($oc-motion-token-distance-by-intent, $intent);
+  @if $distance-factor-token == null {
+    $distance-factor-token: map.get($oc-motion-token-distance-by-intent, $intent);
   }
 
-  @return calc(#{$distance} * #{$distance-token});
+  @return calc(#{$distance} * #{$distance-factor-token});
 }
 
-@function oc-motion($properties, $intent, $phase: change, $pace: normal, $duration-scale: 1, $duration-token: null) {
+@function oc-motion($properties, $intent, $phase: change, $pace: normal, $duration-factor: 1, $duration-token: null, $extra-bounce: null) {
   $intent: _oc-motion-require-intent($intent);
   $phase: _oc-motion-require-phase($phase);
-  $duration-scale: _oc-motion-require-duration-scale($duration-scale);
+  $duration-factor: _oc-motion-require-duration-factor($duration-factor);
+  $extra-bounce: _oc-motion-require-extra-bounce($extra-bounce);
   $spring-config: _oc-motion-spring-config($intent, $phase);
 
   @if $spring-config != null {
@@ -385,10 +472,14 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
       @error 'oc-motion $duration-token is not supported for spring-backed motion.';
     }
 
-    @return _oc-motion-spring($properties, $intent, $phase, $pace, $duration-scale, $spring-config);
+    @return _oc-motion-spring($properties, $intent, $phase, $pace, $duration-factor, $spring-config, $extra-bounce);
+  }
+
+  @if $extra-bounce != null {
+    @error 'oc-motion $extra-bounce is only supported for spring-backed motion.';
   }
 
-  $duration: oc-motion-duration($intent, $phase, $pace, $duration-scale, $duration-token: $duration-token);
+  $duration: oc-motion-duration($intent, $phase, $pace, $duration-factor, $duration-token: $duration-token);
   $timing: oc-motion-timing($intent, $phase);
   $transitions: ();
 
@@ -410,11 +501,11 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
 }
 
 // stylelint-disable-next-line scss/at-mixin-pattern -- Private helper mirrors the public oc-motion mixin name.
-@mixin _oc-motion-reduced($properties, $intent, $phase, $pace, $duration-scale, $reduced, $duration-token) {
+@mixin _oc-motion-reduced($properties, $intent, $phase, $pace, $duration-factor, $reduced, $duration-token) {
   $policy: _oc-motion-reduced-policy($intent, $reduced);
 
   @if $policy == preserve {
-    transition-duration: oc-motion-duration($intent, $phase, $pace, $duration-scale, var(--oc-motion-duration-scale-preserve), $duration-token);
+    transition-duration: oc-motion-duration($intent, $phase, $pace, $duration-factor, var(--oc-motion-duration-factor-preserve), $duration-token);
     transition-timing-function: oc-motion-timing($intent, $phase);
   } @else if $policy == static {
     transition: none;
@@ -429,7 +520,7 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
       transition: none;
     } @else {
       transition-property: $reduced-properties;
-      transition-duration: oc-motion-duration($intent, $phase, $pace, $duration-scale, var(--oc-motion-duration-scale-reduced), $duration-token);
+      transition-duration: oc-motion-duration($intent, $phase, $pace, $duration-factor, var(--oc-motion-duration-factor-reduced), $duration-token);
       transition-timing-function: oc-motion-timing($intent, $phase);
     }
 
@@ -441,10 +532,10 @@ $oc-motion-feedback-properties: (opacity, color, background-color, border-color,
   }
 }
 
-@mixin oc-motion($properties, $intent, $phase: change, $pace: normal, $duration-scale: 1, $reduced: auto, $duration-token: null) {
-  transition: oc-motion($properties, $intent, $phase, $pace, $duration-scale, $duration-token);
+@mixin oc-motion($properties, $intent, $phase: change, $pace: normal, $duration-factor: 1, $reduced: auto, $duration-token: null, $extra-bounce: null) {
+  transition: oc-motion($properties, $intent, $phase, $pace, $duration-factor, $duration-token, $extra-bounce);
 
   @media (prefers-reduced-motion: reduce) {
-    @include _oc-motion-reduced($properties, $intent, $phase, $pace, $duration-scale, $reduced, $duration-token);
+    @include _oc-motion-reduced($properties, $intent, $phase, $pace, $duration-factor, $reduced, $duration-token);
   }
 }