@sandlada/mdk
Version:
A JavaScript library based on Material Design 3, providing data such as color, shape, shadow level, etc.
54 lines (53 loc) • 4.35 kB
JavaScript
export class Easing {
Key;
Value;
toJSON() { return ({ Key: this.Key, Value: this.Value }); }
ToCSSDeclaration({ Semicolon = false } = {}) {
const Value = `cubic-bezier(${this.Value[0]}, ${this.Value[1]}, ${this.Value[2]}, ${this.Value[3]})`;
return `${this.Key}: ${Value}${Semicolon ? ';' : ''}`;
}
ToCSSVariable() {
const Value = `cubic-bezier(${this.Value[0]}, ${this.Value[1]}, ${this.Value[2]}, ${this.Value[3]})`;
return `var(${this.Key}, ${Value})`;
}
ToCSSValue() {
return `cubic-bezier(${this.Value})`;
}
toString() { return this.ToCSSDeclaration(); }
constructor(Key, Value) {
this.Key = Key;
this.Value = Value;
}
static Standard = new Easing('--md-sys-motion-easing-standard', [0.20, 0.00, 0.00, 1.00]);
static StandardAccelerate = new Easing('--md-sys-motion-easing-standard-accelerate', [0.30, 0.00, 1.00, 1.00]);
static StandardDecelerate = new Easing('--md-sys-motion-easing-standard-decelerate', [0.00, 0.00, 0.00, 1.00]);
static Emphasized = new Easing('--md-sys-motion-easing-emphasized', [0.20, 0.00, 0.00, 1.00]);
static EmphasizedAccelerate = new Easing('--md-sys-motion-easing-emphasized-accelerate', [0.30, 0.00, 0.80, 0.15]);
static EmphasizedDecelerate = new Easing('--md-sys-motion-easing-emphasized-decelerate', [0.05, 0.70, 0.10, 1.00]);
static Legacy = new Easing('--md-sys-motion-easing-legacy', [0.40, 0.00, 0.20, 1.00]);
static LegacyAccelerate = new Easing('--md-sys-motion-easing-legacy-accelerate', [0.40, 0.00, 1.00, 1.00]);
static LegacyDecelerate = new Easing('--md-sys-motion-easing-legacy-decelerate', [0.00, 0.00, 0.20, 1.00]);
static Linear = new Easing('--md-sys-motion-easing-linear', [0.00, 0.00, 1.00, 1.00]);
static ExpressiveFastSpatial = new Easing('--md-sys-motion-easing-expressive-fast-spatial', [0.42, 1.67, 0.21, 0.90]);
static ExpressiveDefaultSpatial = new Easing('--md-sys-motion-easing-expressive-default-spatial', [0.38, 1.21, 0.22, 1.00]);
static ExpressiveSlowSpatial = new Easing('--md-sys-motion-easing-expressive-slow-spatial', [0.39, 1.29, 0.35, 0.98]);
static ExpressiveFastEffects = new Easing('--md-sys-motion-easing-expressive-fast-effects', [0.31, 0.94, 0.34, 1.00]);
static ExpressiveDefaultEffects = new Easing('--md-sys-motion-easing-expressive-default-effects', [0.34, 0.80, 0.34, 1.00]);
static ExpressiveSlowEffects = new Easing('--md-sys-motion-easing-expressive-slow-effects', [0.34, 0.88, 0.34, 1.00]);
static StandardFastSpatial = new Easing('--md-sys-motion-easing-standard-fast-spatial', [0.27, 1.06, 0.18, 1.00]);
static StandardDefaultSpatial = new Easing('--md-sys-motion-easing-standard-default-spatial', [0.27, 1.06, 0.18, 1.00]);
static StandardSlowSpatial = new Easing('--md-sys-motion-easing-standard-slow-spatial', [0.27, 1.06, 0.18, 1.00]);
static StandardFastEffects = new Easing('--md-sys-motion-easing-standard-fast-effects', [0.31, 0.94, 0.34, 1.00]);
static StandardDefaultEffects = new Easing('--md-sys-motion-easing-standard-default-effects', [0.34, 0.80, 0.34, 1.00]);
static StandardSlowEffects = new Easing('--md-sys-motion-easing-standard-slow-effects', [0.34, 0.88, 0.34, 1.00]);
static AllEnums = {
Standard: this.Standard, StandardAccelerate: this.StandardAccelerate, StandardDecelerate: this.StandardDecelerate,
Emphasized: this.Emphasized, EmphasizedAccelerate: this.EmphasizedAccelerate, EmphasizedDecelerate: this.EmphasizedDecelerate,
Legacy: this.Legacy, LegacyAccelerate: this.LegacyAccelerate, LegacyDecelerate: this.LegacyDecelerate,
Linear: this.Linear,
ExpressiveFastSpatial: this.ExpressiveFastSpatial, ExpressiveDefaultSpatial: this.ExpressiveDefaultSpatial, ExpressiveSlowSpatial: this.ExpressiveSlowSpatial,
ExpressiveFastEffects: this.ExpressiveFastEffects, ExpressiveDefaultEffects: this.ExpressiveDefaultEffects, ExpressiveSlowEffects: this.ExpressiveSlowEffects,
StandardFastSpatial: this.StandardFastSpatial, StandardDefaultSpatial: this.StandardDefaultSpatial, StandardSlowSpatial: this.StandardSlowSpatial,
StandardFastEffects: this.StandardFastEffects, StandardDefaultEffects: this.StandardDefaultEffects, StandardSlowEffects: this.StandardSlowEffects,
};
}