@mezzanine-ui/system 1.0.0-canary.2 → 1.0.0-canary.3

package/motion/_motion.scss

@@ -3,21 +3,37 @@
 
 $prefix: mzn-motion;
 
-$duration-names: (shortest, shorter, short, standard, long);
+$duration-names: (fast, moderate, slow, loop, pause-short, pause-long);
 $default-durations: (
-  shortest: 150ms,
-  shorter: 200ms,
-  short: 250ms,
-  standard: 300ms,
-  long: 375ms,
+  fast: 150ms,
+  moderate: 250ms,
+  slow: 400ms,
+  loop: 1600ms,
+  pause-short: 3000ms,
+  pause-long: 10000ms,
 );
 
-$easing-names: (standard, emphasized, decelerated, accelerated);
+$easing-names: (entrance, exit, standard);
 $default-easings: (
-  standard: cubic-bezier(0.58, 0.01, 0.29, 1.01),
-  emphasized: cubic-bezier(0.83, 0, 0.17, 1),
-  decelerated: cubic-bezier(0, 0, 0.3, 1),
-  accelerated: cubic-bezier(0.32, 0, 0.67, 0),
+  entrance: cubic-bezier(0.0, 0.0, 0.58, 1),
+  exit: cubic-bezier(0.42, 0.0, 1, 1),
+  standard: cubic-bezier(0.4, 0.0, 0.2, 1),
+);
+
+$pattern-names: (breathe, skeleton-loading, spin);
+$default-pattern: (
+  breathe: (
+    duration: loop,
+    easing: standard,
+  ),
+  skeleton-loading: (
+    duration: loop,
+    easing: standard,
+  ),
+  spin: (
+    duration: loop,
+    easing: entrance,
+  ),
 );
 
 $default-options: (
@@ -33,6 +49,10 @@ $default-options: (
   @return list.includes($easing-names, $easing-name);
 }
 
+@function is-pattern-name-valid($pattern-name) {
+  @return list.includes($pattern-names, $pattern-name);
+}
+
 @function duration($duration-name) {
   @if not is-duration-name-valid($duration-name) {
     @error 'Invalid duration name #{$duration-name}. Please choose one of #{$duration-names}';
@@ -62,3 +82,19 @@ $default-options: (
     --#{$prefix}-easing-#{$name}: #{$value};
   }
 }
+
+@mixin pattern($pattern-name, $action-name: animation) {
+  @if not is-pattern-name-valid($pattern-name) {
+    @error 'Invalid pattern name #{$pattern-name}. Please choose one of #{$pattern-names}';
+  }
+
+  $pattern: map.get($default-pattern, $pattern-name);
+
+  @if $pattern {
+    $duration-name: map.get($pattern, duration);
+    $easing-name: map.get($pattern, easing);
+
+    #{$action-name}-duration: duration($duration-name);
+    #{$action-name}-timing-function: easing($easing-name);
+  }
+}

package/motion/duration.d.ts

@@ -1,2 +1,2 @@
-export type MotionDurationType = 'shortest' | 'shorter' | 'short' | 'standard' | 'long';
+export type MotionDurationType = 'fast' | 'moderate' | 'slow' | 'loop' | 'pauseShort' | 'pauseLong';
 export declare const MOTION_DURATION: Readonly<Record<MotionDurationType, number>>;

package/motion/duration.js

@@ -1,9 +1,10 @@
 const MOTION_DURATION = {
-    shortest: 150,
-    shorter: 200,
-    short: 250,
-    standard: 300,
-    long: 375,
+    fast: 150,
+    moderate: 250,
+    slow: 400,
+    loop: 1600,
+    pauseShort: 3000,
+    pauseLong: 10000,
 };
 
 export { MOTION_DURATION };

package/motion/easing.d.ts

@@ -1,2 +1,2 @@
-export type MotionEasingType = 'standard' | 'emphasized' | 'decelerated' | 'accelerated';
+export type MotionEasingType = 'entrance' | 'exit' | 'standard';
 export declare const MOTION_EASING: Readonly<Record<MotionEasingType, string>>;

package/motion/easing.js

@@ -1,8 +1,7 @@
 const MOTION_EASING = {
-    standard: 'cubic-bezier(0.58, 0.01, 0.29, 1.01)',
-    emphasized: 'cubic-bezier(0.83, 0, 0.17, 1)',
-    decelerated: 'cubic-bezier(0, 0, 0.3, 1)',
-    accelerated: 'cubic-bezier(0.32, 0, 0.67, 0)',
+    entrance: 'cubic-bezier(0, 0, 0.58, 1)',
+    exit: 'cubic-bezier(0.42, 0, 1, 1)',
+    standard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
 };
 
 export { MOTION_EASING };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/system",
-  "version": "1.0.0-canary.2",
+  "version": "1.0.0-canary.3",
   "description": "Design System for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {

package/spacing/_semantic.scss

@@ -354,8 +354,8 @@ $semantic-spacings: (
         compact: primitive.variable(40),
       ),
       ultra: (
-        default: primitive.variable(56),
-        compact: primitive.variable(48),
+        default: primitive.variable(64),
+        compact: primitive.variable(56),
       ),
     ),
     vertical: (

package/transition/_transition.scss

@@ -1,17 +1,33 @@
+@use 'sass:meta';
+@use 'sass:string';
 @use '../motion';
 
-@function enter($property, $duration: motion.duration(short), $delay: 0ms) {
-  @return $property $duration motion.easing(decelerated) $delay;
-}
+@function entrance($property, $duration: moderate, $delay: 0ms) {
+  $duration-value: if(
+    meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') != null,
+    $duration,
+    motion.duration($duration)
+  );
 
-@function exit($property, $duration: motion.duration(shorter), $delay: 0ms) {
-  @return $property $duration motion.easing(accelerated) $delay;
+  @return $property $duration-value motion.easing(entrance) $delay;
 }
 
-@function emphasized($property, $duration: motion.duration(short), $delay: 0ms) {
-  @return $property $duration motion.easing(emphasized) $delay;
+@function exit($property, $duration: moderate, $delay: 0ms) {
+  $duration-value: if(
+    meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') != null,
+    $duration,
+    motion.duration($duration)
+  );
+
+  @return $property $duration-value motion.easing(exit) $delay;
 }
 
-@function standard($property, $duration: motion.duration(short), $delay: 0ms) {
-  @return $property $duration motion.easing(standard) $delay;
+@function standard($property, $duration: moderate, $delay: 0ms) {
+  $duration-value: if(
+    meta.type-of($duration) == number or string.index(meta.inspect($duration), 'calc') != null,
+    $duration,
+    motion.duration($duration)
+  );
+
+  @return $property $duration-value motion.easing(standard) $delay;
 }

package/typography/_semantic.scss

@@ -133,14 +133,14 @@ $semantic-typographies: (
   ),
   input: (
     font-size: primitive.font-size-variable(14),
-    font-weight: primitive.font-weight-variable(semibold),
+    font-weight: primitive.font-weight-variable(regular),
     line-height: primitive.line-height-variable(functional),
     letter-spacing: primitive.letter-spacing-variable(0),
   ),
   input-mono: (
     font-family: primitive.font-family-variable(sfmono),
     font-size: primitive.font-size-variable(14),
-    font-weight: primitive.font-weight-variable(semibold),
+    font-weight: primitive.font-weight-variable(regular),
     line-height: primitive.line-height-variable(functional),
     letter-spacing: primitive.letter-spacing-variable(0),
   ),

package/typography/_sf-mono.scss

@@ -3,6 +3,7 @@
  *
  * SF Mono is a monospaced font designed by Apple.
  * This file provides @font-face declarations to load SF Mono from file.
+ * download link: https://www.cufonfonts.com/font/sf-mono
  */
 
 /* SF Mono Regular (400) */
@@ -11,7 +12,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('~@mezzanine-ui/system/typography/SF-Mono/SF-Mono-Regular.otf') format('opentype');
+  src: url('~@mezzanine-ui/system/typography/SF-Mono/SFMonoRegular.woff') format('woff');
 }
 
 /* SF Mono Medium (500) */
@@ -20,7 +21,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url('~@mezzanine-ui/system/typography/SF-Mono/SF-Mono-Medium.otf') format('opentype');
+  src: url('~@mezzanine-ui/system/typography/SF-Mono/SFMonoMedium.woff') format('woff');
 }
 
 /* SF Mono Semibold (600) */
@@ -29,5 +30,5 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url('~@mezzanine-ui/system/typography/SF-Mono/SF-Mono-Semibold.otf') format('opentype');
+  src: url('~@mezzanine-ui/system/typography/SF-Mono/SFMonoSemibold.woff') format('woff');
 }

package/z-index/_z-index.scss

@@ -1,7 +1,7 @@
 @use '../utils/list';
 
 $prefix: mzn-z-index;
-$orders: (modal, drawer, popover, feedback);
+$orders: (base, alert, modal, drawer, popover, feedback);
 
 @mixin variables($base: 1000) {
   @for $index from 1 through list.length($orders) {