@orioncactuscorp/ui 1.0.0

package/src/scss/mixins/_motion.scss

@@ -0,0 +1,450 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use './spring' as *;
+
+// CSS-token tables keep non-spring transitions and reduced-motion output themeable.
+$oc-motion-token-duration-by-intent: (
+  feedback: var(--oc-motion-duration-feedback),
+  reject: var(--oc-motion-duration-reject),
+  reveal: var(--oc-motion-duration-reveal),
+  move: var(--oc-motion-duration-move),
+  gesture: var(--oc-motion-duration-gesture),
+  ambient: var(--oc-motion-duration-ambient),
+) !default;
+
+$oc-motion-token-timing-by-intent: (
+  feedback: var(--oc-motion-timing-feedback),
+  reject: var(--oc-motion-timing-reject),
+  reveal: var(--oc-motion-timing-reveal),
+  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),
+  ),
+  gesture: (
+    settle: var(--oc-motion-duration-gesture-settle),
+  ),
+) !default;
+
+$oc-motion-token-timing-by-phase: (
+  reveal: (
+    exit: var(--oc-motion-timing-reveal-exit),
+  ),
+  gesture: (
+    settle: var(--oc-motion-timing-gesture-settle),
+  ),
+) !default;
+
+$oc-motion-token-pace-scale: (
+  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),
+) !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),
+) !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,
+  move: 0.3s,
+  gesture: 0.2s,
+  ambient: 1.2s,
+) !default;
+
+$oc-motion-spring-duration-by-phase: (
+  reveal: (
+    exit: 0.125s,
+  ),
+) !default;
+
+$oc-motion-phases: (change, enter, exit, settle, 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,
+      enter,
+    ),
+    preset: smooth,
+    extra-bounce: 0,
+  ),
+  reveal: (
+    preset: smooth,
+    extra-bounce: 0,
+    phases: (
+      change: (
+        preset: snappy,
+        property-preset: (
+          opacity: smooth,
+          transform: snappy,
+        ),
+        property-extra-bounce: (
+          transform: 0.1,
+        ),
+      ),
+      enter: (
+        preset: snappy,
+        property-preset: (
+          opacity: smooth,
+          transform: snappy,
+        ),
+        property-extra-bounce: (
+          transform: 0.1,
+        ),
+      ),
+    ),
+  ),
+  move: (
+    preset: smooth,
+    extra-bounce: 0,
+  ),
+  ambient: (
+    phases: (
+      loop,
+    ),
+    preset: smooth,
+    extra-bounce: 0,
+  ),
+) !default;
+
+$oc-motion-reduced-policy-by-intent: (
+  feedback: feedback,
+  reject: feedback,
+  reveal: fade,
+  move: static,
+  gesture: feedback,
+  ambient: static,
+) !default;
+
+$oc-motion-feedback-properties: (opacity, color, background-color, border-color, box-shadow, outline-color, fill, stroke) !default;
+
+@function _oc-motion-require-intent($intent) {
+  @if not map.has-key($oc-motion-token-duration-by-intent, $intent) {
+    @error 'Unknown oc-motion intent: #{$intent}.';
+  }
+
+  @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.';
+  }
+
+  @if $duration-scale < 0 {
+    @error 'oc-motion $duration-scale must be greater than or equal to 0.';
+  }
+
+  @return $duration-scale;
+}
+
+@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.';
+  }
+
+  @return $phase;
+}
+
+@function _oc-motion-require-reduced-policy($reduced) {
+  @if list.index($oc-motion-reduced-policies, $reduced) == null {
+    @error 'Unknown oc-motion reduced policy: #{$reduced}. Use auto, preserve, fade, static, or feedback.';
+  }
+
+  @return $reduced;
+}
+
+@function _oc-motion-token-pace-scale($pace) {
+  @if not map.has-key($oc-motion-token-pace-scale, $pace) {
+    @error 'Unknown oc-motion pace: #{$pace}. Use quick, normal, or slow.';
+  }
+
+  @return map.get($oc-motion-token-pace-scale, $pace);
+}
+
+@function _oc-motion-require-scale-value($scale) {
+  @if meta.type-of($scale) != 'number' {
+    @return $scale;
+  }
+
+  @if not math.is-unitless($scale) {
+    @error 'oc-motion-scale $scale must be a unitless number.';
+  }
+
+  @if $scale < 0 {
+    @error 'oc-motion-scale $scale must be greater than or equal to 0.';
+  }
+
+  @return $scale;
+}
+
+@function _oc-motion-phase-value($table, $intent, $phase, $fallback) {
+  @if map.has-key($table, $intent) {
+    $phase-table: map.get($table, $intent);
+
+    @if map.has-key($phase-table, $phase) {
+      @return map.get($phase-table, $phase);
+    }
+  }
+
+  @return $fallback;
+}
+
+@function _oc-motion-properties($properties) {
+  @if meta.type-of($properties) == 'list' {
+    @if list.length($properties) == 0 {
+      @error 'oc-motion $properties must not be empty.';
+    }
+
+    @return $properties;
+  }
+
+  @return ($properties);
+}
+
+@function _oc-motion-has-property($properties, $property) {
+  @return list.index(_oc-motion-properties($properties), $property) != null;
+}
+
+@function _oc-motion-feedback-property-list($properties) {
+  $reduced-properties: ();
+
+  @each $property in _oc-motion-properties($properties) {
+    @if list.index($oc-motion-feedback-properties, $property) != null {
+      $reduced-properties: list.append($reduced-properties, $property, $separator: comma);
+    }
+  }
+
+  @return $reduced-properties;
+}
+
+@function _oc-motion-transition-item($property, $duration, $timing) {
+  @return #{$property} #{$duration} #{$timing};
+}
+
+@function _oc-motion-spring-duration-value($intent, $phase) {
+  $base-duration: map.get($oc-motion-spring-duration-by-intent, $intent);
+
+  @return _oc-motion-phase-value($oc-motion-spring-duration-by-phase, $intent, $phase, $base-duration);
+}
+
+@function _oc-motion-spring-config($intent, $phase) {
+  @if not map.has-key($oc-motion-spring-by-intent, $intent) {
+    @return null;
+  }
+
+  $config: map.get($oc-motion-spring-by-intent, $intent);
+  $phases: map.get($config, phases);
+
+  @if $phases == null {
+    @return $config;
+  }
+
+  @if meta.type-of($phases) == 'map' {
+    @if map.has-key($phases, $phase) {
+      @return map.merge($config, map.get($phases, $phase));
+    }
+
+    @return $config;
+  }
+
+  @if list.index($phases, $phase) != null {
+    @return $config;
+  }
+
+  @return null;
+}
+
+@function _oc-motion-spring-extra-bounce($config, $property) {
+  $property-extra-bounce: map.get($config, property-extra-bounce);
+
+  @if $property-extra-bounce != null and map.has-key($property-extra-bounce, $property) {
+    @return map.get($property-extra-bounce, $property);
+  }
+
+  @return map.get($config, extra-bounce);
+}
+
+@function _oc-motion-spring-preset($config, $property) {
+  $property-preset: map.get($config, property-preset);
+
+  @if $property-preset != null and map.has-key($property-preset, $property) {
+    @return map.get($property-preset, $property);
+  }
+
+  @return map.get($config, preset);
+}
+
+@function _oc-motion-spring-transition-item($property, $spring-duration, $config, $pace, $duration-scale) {
+  $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);
+
+  @return _oc-motion-transition-item($property, $duration, $timing);
+}
+
+@function _oc-motion-spring($properties, $intent, $phase, $pace, $duration-scale, $config) {
+  $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);
+  }
+
+  @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) {
+  $intent: _oc-motion-require-intent($intent);
+  $phase: _oc-motion-require-phase($phase);
+  $duration-scale: _oc-motion-require-duration-scale($duration-scale);
+  $base-duration: map.get($oc-motion-token-duration-by-intent, $intent);
+  $duration: $duration-token;
+
+  @if $duration == null {
+    $duration: _oc-motion-phase-value($oc-motion-token-duration-by-phase, $intent, $phase, $base-duration);
+  }
+
+  $pace-scale: _oc-motion-token-pace-scale($pace);
+
+  @return calc(#{$duration} * #{$duration-scale-token} * #{$pace-scale} * #{$duration-scale});
+}
+
+@function oc-motion-timing($intent, $phase: change) {
+  $intent: _oc-motion-require-intent($intent);
+  $phase: _oc-motion-require-phase($phase);
+  $base-timing: map.get($oc-motion-token-timing-by-intent, $intent);
+
+  @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) {
+  $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);
+  }
+
+  @return max(0, calc(1 + (#{$scale} - 1) * #{$scale-token}));
+}
+
+@function oc-motion-distance($distance, $intent: reveal, $distance-token: null) {
+  $intent: _oc-motion-require-intent($intent);
+
+  @if $distance-token == null {
+    $distance-token: map.get($oc-motion-token-distance-by-intent, $intent);
+  }
+
+  @return calc(#{$distance} * #{$distance-token});
+}
+
+@function oc-motion($properties, $intent, $phase: change, $pace: normal, $duration-scale: 1, $duration-token: null) {
+  $intent: _oc-motion-require-intent($intent);
+  $phase: _oc-motion-require-phase($phase);
+  $duration-scale: _oc-motion-require-duration-scale($duration-scale);
+  $spring-config: _oc-motion-spring-config($intent, $phase);
+
+  @if $spring-config != null {
+    @if $duration-token != null {
+      @error 'oc-motion $duration-token is not supported for spring-backed motion.';
+    }
+
+    @return _oc-motion-spring($properties, $intent, $phase, $pace, $duration-scale, $spring-config);
+  }
+
+  $duration: oc-motion-duration($intent, $phase, $pace, $duration-scale, $duration-token: $duration-token);
+  $timing: oc-motion-timing($intent, $phase);
+  $transitions: ();
+
+  @each $property in _oc-motion-properties($properties) {
+    $transitions: list.append($transitions, _oc-motion-transition-item($property, $duration, $timing), $separator: comma);
+  }
+
+  @return $transitions;
+}
+
+@function _oc-motion-reduced-policy($intent, $reduced) {
+  $reduced: _oc-motion-require-reduced-policy($reduced);
+
+  @if $reduced != auto {
+    @return $reduced;
+  }
+
+  @return map.get($oc-motion-reduced-policy-by-intent, _oc-motion-require-intent($intent));
+}
+
+// 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) {
+  $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-timing-function: oc-motion-timing($intent, $phase);
+  } @else if $policy == static {
+    transition: none;
+
+    @if _oc-motion-has-property($properties, transform) {
+      transform: none;
+    }
+  } @else if $policy == fade or $policy == feedback {
+    $reduced-properties: _oc-motion-feedback-property-list($properties);
+
+    @if list.length($reduced-properties) == 0 {
+      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-timing-function: oc-motion-timing($intent, $phase);
+    }
+
+    @if _oc-motion-has-property($properties, transform) {
+      transform: none;
+    }
+  } @else {
+    @error 'Unknown oc-motion reduced policy: #{$policy}.';
+  }
+}
+
+@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);
+
+  @media (prefers-reduced-motion: reduce) {
+    @include _oc-motion-reduced($properties, $intent, $phase, $pace, $duration-scale, $reduced, $duration-token);
+  }
+}