Rename shared-ui to ui-design-system
- 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>
This commit is contained in:
skyai_dev
124
projects/ui-design-system/src/styles/base/_motion.scss
Normal file
124
projects/ui-design-system/src/styles/base/_motion.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
// 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,
|
||||
);
|
||||
Reference in New Issue
Block a user