// Motion Tokens // Generated from base-tokens.json // Animation Durations $base-motion-duration-instant: 50ms; $base-motion-duration-fast: 150ms; $base-motion-duration-normal: 300ms; $base-motion-duration-slow: 500ms; $base-motion-duration-slower: 700ms; $base-motion-duration-slowest: 1000ms; $base-motion-duration-ultra-slow: 2000ms; // Easing Functions $base-motion-easing-linear: linear; $base-motion-easing-ease: ease; $base-motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1); $base-motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1); $base-motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); $base-motion-easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55); $base-motion-easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); $base-motion-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1); $base-motion-easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); // Transition Properties $base-motion-transition-property-none: none; $base-motion-transition-property-all: all; $base-motion-transition-property-colors: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke; $base-motion-transition-property-opacity: opacity; $base-motion-transition-property-shadow: box-shadow; $base-motion-transition-property-transform: transform; $base-motion-transition-property-spacing: margin, padding; $base-motion-transition-property-size: width, height; // Transition Durations $base-motion-transition-duration-0: 0ms; $base-motion-transition-duration-75: 75ms; $base-motion-transition-duration-100: 100ms; $base-motion-transition-duration-150: 150ms; $base-motion-transition-duration-200: 200ms; $base-motion-transition-duration-300: 300ms; $base-motion-transition-duration-500: 500ms; $base-motion-transition-duration-700: 700ms; $base-motion-transition-duration-1000: 1000ms; $base-motion-transition-duration-1500: 1500ms; $base-motion-transition-duration-2000: 2000ms; // Transition Timing Functions $base-motion-transition-timing-linear: linear; $base-motion-transition-timing-in: cubic-bezier(0.4, 0, 1, 1); $base-motion-transition-timing-out: cubic-bezier(0, 0, 0.2, 1); $base-motion-transition-timing-in-out: cubic-bezier(0.4, 0, 0.2, 1); $base-motion-transition-timing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55); $base-motion-transition-timing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); // Transition Delays $base-motion-transition-delay-0: 0ms; $base-motion-transition-delay-75: 75ms; $base-motion-transition-delay-100: 100ms; $base-motion-transition-delay-150: 150ms; $base-motion-transition-delay-200: 200ms; $base-motion-transition-delay-300: 300ms; $base-motion-transition-delay-500: 500ms; $base-motion-transition-delay-700: 700ms; $base-motion-transition-delay-1000: 1000ms; // Duration Map $base-motion-durations: ( instant: $base-motion-duration-instant, fast: $base-motion-duration-fast, normal: $base-motion-duration-normal, slow: $base-motion-duration-slow, slower: $base-motion-duration-slower, slowest: $base-motion-duration-slowest, ultra-slow: $base-motion-duration-ultra-slow, ); // Easing Map $base-motion-easings: ( linear: $base-motion-easing-linear, ease: $base-motion-easing-ease, ease-in: $base-motion-easing-ease-in, ease-out: $base-motion-easing-ease-out, ease-in-out: $base-motion-easing-ease-in-out, spring: $base-motion-easing-spring, bounce: $base-motion-easing-bounce, sharp: $base-motion-easing-sharp, elastic: $base-motion-easing-elastic, ); // Hover Transform Values $base-motion-hover-transform-none: none; $base-motion-hover-transform-scale-sm: scale(1.02); $base-motion-hover-transform-scale-md: scale(1.05); $base-motion-hover-transform-scale-lg: scale(1.1); $base-motion-hover-transform-lift-sm: translateY(-2px); $base-motion-hover-transform-lift-md: translateY(-4px); $base-motion-hover-transform-lift-lg: translateY(-8px); $base-motion-hover-transform-scale-lift-sm: scale(1.02) translateY(-2px); $base-motion-hover-transform-scale-lift-md: scale(1.05) translateY(-4px); // Transition Property Map $base-motion-transition-properties: ( none: $base-motion-transition-property-none, all: $base-motion-transition-property-all, colors: $base-motion-transition-property-colors, opacity: $base-motion-transition-property-opacity, shadow: $base-motion-transition-property-shadow, transform: $base-motion-transition-property-transform, spacing: $base-motion-transition-property-spacing, size: $base-motion-transition-property-size, ); // Hover Transform Map $base-motion-hover-transforms: ( none: $base-motion-hover-transform-none, scale-sm: $base-motion-hover-transform-scale-sm, scale-md: $base-motion-hover-transform-scale-md, scale-lg: $base-motion-hover-transform-scale-lg, lift-sm: $base-motion-hover-transform-lift-sm, lift-md: $base-motion-hover-transform-lift-md, lift-lg: $base-motion-hover-transform-lift-lg, scale-lift-sm: $base-motion-hover-transform-scale-lift-sm, scale-lift-md: $base-motion-hover-transform-scale-lift-md, );