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

package/effect/_effect.scss

@@ -9,9 +9,6 @@ $effect-contexts: (shadow, focus);
 
 $effect-values: (
   shadow: (
-    none: (
-      value: 0 0 0 0 rgb(0 0 0 / 0%),
-    ),
     raised: (
       value: 0 0 6px 0 semantic.variable(shadow, dark),
     ),

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.1",
+  "version": "1.0.0-canary.3",
   "description": "Design System for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {

package/spacing/_primitives.scss

@@ -10,6 +10,7 @@ $primitive-scales: (
   0,
   1,
   2,
+  3,
   4,
   6,
   8,
@@ -29,7 +30,9 @@ $primitive-scales: (
   56,
   60,
   64,
+  70,
   80,
+  140,
   160,
   240,
   320,
@@ -48,6 +51,7 @@ $default-primitives: (
   0: 0,
   1: 1px,
   2: 2px,
+  3: 3px,
   4: 4px,
   6: 6px,
   8: 8px,
@@ -67,7 +71,9 @@ $default-primitives: (
   56: 56px,
   60: 60px,
   64: 64px,
+  70: 70px,
   80: 80px,
+  140: 140px,
   160: 160px,
   240: 240px,
   320: 320px,

package/spacing/_semantic.scss

@@ -16,6 +16,7 @@ $padding-categories: (horizontal, vertical);
 // 定義各個分類下的 tones
 $element-tones: (
   hairline,
+  micro,
   tiny,
   tight,
   compact,
@@ -37,7 +38,9 @@ $element-tones: (
 
 $container-tones: (
   collapsed,
+  compressed,
   tiny,
+  snug,
   tight,
   slim,
   narrow,
@@ -64,11 +67,13 @@ $horizontal-tones: (
   comfort-fixed,
   roomy,
   spacious,
+  open,
   relaxed,
   airy,
   breath,
   wide,
-  max
+  max,
+  ultra
 );
 
 $vertical-tones: (
@@ -92,6 +97,10 @@ $semantic-spacings: (
         default: primitive.variable(1),
         compact: primitive.variable(1),
       ),
+      micro: (
+        default: primitive.variable(3),
+        compact: primitive.variable(3),
+      ),
       tiny: (
         default: primitive.variable(4),
         compact: primitive.variable(4),
@@ -166,10 +175,18 @@ $semantic-spacings: (
         default: primitive.variable(52),
         compact: primitive.variable(52),
       ),
+      compressed: (
+        default: primitive.variable(70),
+        compact: primitive.variable(70),
+      ),
       tiny: (
         default: primitive.variable(80),
         compact: primitive.variable(80),
       ),
+      snug: (
+        default: primitive.variable(140),
+        compact: primitive.variable(140),
+      ),
       tight: (
         default: primitive.variable(160),
         compact: primitive.variable(160),
@@ -312,6 +329,10 @@ $semantic-spacings: (
         default: primitive.variable(16),
         compact: primitive.variable(14),
       ),
+      open: (
+        default: primitive.variable(20),
+        compact: primitive.variable(16),
+      ),
       relaxed: (
         default: primitive.variable(24),
         compact: primitive.variable(20),
@@ -332,6 +353,10 @@ $semantic-spacings: (
         default: primitive.variable(48),
         compact: primitive.variable(40),
       ),
+      ultra: (
+        default: primitive.variable(64),
+        compact: primitive.variable(56),
+      ),
     ),
     vertical: (
       none: (

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) {