2f56ee01b3
- More descriptive name for design system library - Update all imports and configurations - No functional changes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
124 lines
4.9 KiB
SCSS
124 lines
4.9 KiB
SCSS
// 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,
|
|
); |