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

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),
     ),
@@ -21,15 +18,30 @@ $effect-values: (
     modal: (
       value: string.unquote('0 9px 28px 8px #{semantic.variable(shadow, dark-faint)}, 0 20px 24px -4px #{semantic.variable(shadow, dark-light)}, 0 3px 6px -4px #{semantic.variable(shadow, dark-ghost)}'),
     ),
-    table-sticky: (
+    drawer: (
+      value: -6px 0 10px 0 semantic.variable(shadow, dark),
+    ),
+    table-sticky-left: (
       value: 1px 0 4px 0 semantic.variable(shadow, dark),
     ),
+    table-sticky-right: (
+      value: -1px 0 4px 0 semantic.variable(shadow, dark),
+    ),
+    table-list-floating: (
+      value: 0px 6px 16px 0 semantic.variable(shadow, dark),
+    ),
     slider-handle: (
       value: 0 2px 3px 0 semantic.variable(shadow, brand),
     ),
     inner-top-and-bottom: (
       value: string.unquote('0 1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 -1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 0 12px 0 #{semantic.variable(shadow, dark)}'),
     ),
+    inner-top: (
+      value: string.unquote('0 1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 0 12px 0 #{semantic.variable(shadow, dark)}'),
+    ),
+    inner-bottom: (
+      value: string.unquote('0 -1px 1px 0 #{semantic.variable(shadow, light-faint)} inset, 0 0 12px 0 #{semantic.variable(shadow, dark)}'),
+    ),
   ),
   focus: (
     primary: (

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.10",
   "description": "Design System for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {

package/palette/_primitives.scss

@@ -116,6 +116,7 @@ $default-primitives: (
   // 白色系 - 特殊級距: white, white-alpha-10/20/.../90
   white-base: (
     white: #FFF,
+    white-alpha-0: rgb(255 255 255 / 0%),
     white-alpha-5:  rgb(255 255 255 / 5%),
     white-alpha-10: rgb(255 255 255 / 10%),
     white-alpha-20: rgb(255 255 255 / 20%),
@@ -130,6 +131,7 @@ $default-primitives: (
   // 黑色系 - 特殊級距: black, black-alpha-3/5/8/10/20/.../90
   black-base: (
     black: #000,
+    black-alpha-0: rgb(0 0 0 / 0%),
     black-alpha-3: rgb(0 0 0 / 3%),
     black-alpha-5: rgb(0 0 0 / 5%),
     black-alpha-8: rgb(0 0 0 / 8%),

package/palette/_semantic.scss

@@ -50,6 +50,10 @@ $semantic-colors: (
       light: primitive.variable(gray, 700),
       dark: primitive.variable(gray, 950),
     ),
+    fixed-solid: (
+      light: primitive.variable(gray, 800),
+      dark: primitive.variable(gray, 800),
+    ),
     neutral-ghost: (
       light: primitive.variable(gray, 50),
       dark: primitive.variable(gray, 950),
@@ -320,6 +324,10 @@ $semantic-colors: (
     ),
   ),
   border: (
+    ghost: (
+      light: primitive.variable(black-base, black-alpha-0),
+      dark: primitive.variable(black-base, black-alpha-0),
+    ),
     fixed-light: (
       light: primitive.variable(white-base, white),
       dark: primitive.variable(white-base, white),
@@ -366,6 +374,10 @@ $semantic-colors: (
     ),
   ),
   separator: (
+    ghost: (
+      light: primitive.variable(black-base, black-alpha-0),
+      dark: primitive.variable(black-base, black-alpha-0),
+    ),
     neutral-faint: (
       light: primitive.variable(gray, 200),
       dark: primitive.variable(gray, 700),

package/spacing/_primitives.scss

@@ -10,6 +10,7 @@ $primitive-scales: (
   0,
   1,
   2,
+  3,
   4,
   6,
   8,
@@ -24,12 +25,22 @@ $primitive-scales: (
   32,
   36,
   40,
+  44,
   48,
   52,
   56,
   60,
   64,
+  68,
+  70,
+  76,
   80,
+  88,
+  92,
+  96,
+  100,
+  120,
+  140,
   160,
   240,
   320,
@@ -40,7 +51,8 @@ $primitive-scales: (
   640,
   720,
   960,
-  1140
+  1140,
+  1280,
 );
 
 // 預設 spacing 值定義（px 會自動轉換為 rem）
@@ -48,6 +60,7 @@ $default-primitives: (
   0: 0,
   1: 1px,
   2: 2px,
+  3: 3px,
   4: 4px,
   6: 6px,
   8: 8px,
@@ -62,12 +75,22 @@ $default-primitives: (
   32: 32px,
   36: 36px,
   40: 40px,
+  44: 44px,
   48: 48px,
   52: 52px,
   56: 56px,
   60: 60px,
   64: 64px,
+  68: 68px,
+  70: 70px,
+  76: 76px,
   80: 80px,
+  88: 88px,
+  92: 92px,
+  96: 96px,
+  100: 100px,
+  120: 120px,
+  140: 140px,
   160: 160px,
   240: 240px,
   320: 320px,
@@ -79,6 +102,7 @@ $default-primitives: (
   720: 720px,
   960: 960px,
   1140: 1140px,
+  1280: 1280px
 );
 
 // 驗證 scale 是否有效

package/spacing/_semantic.scss

@@ -16,6 +16,7 @@ $padding-categories: (horizontal, vertical);
 // 定義各個分類下的 tones
 $element-tones: (
   hairline,
+  micro,
   tiny,
   tight,
   compact,
@@ -36,8 +37,17 @@ $element-tones: (
 );
 
 $container-tones: (
+  minimal,
+  minimized,
   collapsed,
+  reduced,
+  condensed,
+  compressed,
+  tightened,
   tiny,
+  medium,
+  small,
+  snug,
   tight,
   slim,
   narrow,
@@ -47,7 +57,8 @@ $container-tones: (
   broad,
   wide,
   expanded,
-  max
+  max,
+  xwide
 );
 
 $horizontal-tones: (
@@ -64,11 +75,15 @@ $horizontal-tones: (
   comfort-fixed,
   roomy,
   spacious,
+  open,
   relaxed,
   airy,
   breath,
+  loose,
   wide,
-  max
+  max,
+  ultra,
+  xultra
 );
 
 $vertical-tones: (
@@ -76,13 +91,20 @@ $vertical-tones: (
   micro,
   tiny,
   tight,
+  tight-fixed,
   base,
   calm,
   comfort,
   roomy,
   spacious,
   generous,
-  relaxed
+  relaxed,
+  airy,
+  breath,
+  loose,
+  wide,
+  max,
+  ultra
 );
 
 $semantic-spacings: (
@@ -92,6 +114,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),
@@ -140,6 +166,10 @@ $semantic-spacings: (
         default: primitive.variable(36),
         compact: primitive.variable(32),
       ),
+      loose-fixed: (
+        default: primitive.variable(36),
+        compact: primitive.variable(36),
+      ),
       extra-wide: (
         default: primitive.variable(40),
         compact: primitive.variable(36),
@@ -148,28 +178,72 @@ $semantic-spacings: (
         default: primitive.variable(40),
         compact: primitive.variable(24),
       ),
+      wide-expanded: (
+        default: primitive.variable(40),
+        compact: primitive.variable(24),
+      ),
       expansive: (
         default: primitive.variable(60),
-        compact: primitive.variable(24),
+        compact: primitive.variable(56),
       ),
       extra: (
         default: primitive.variable(64),
         compact: primitive.variable(48),
       ),
+      ultra-fixed: (
+        default: primitive.variable(68),
+        compact: primitive.variable(68),
+      ),
       max: (
         default: primitive.variable(80),
         compact: primitive.variable(64),
       ),
     ),
     container: (
+      minimal: (
+        default: primitive.variable(36),
+        compact: primitive.variable(28),
+      ),
+      minimized: (
+        default: primitive.variable(40),
+        compact: primitive.variable(32),
+      ),
       collapsed: (
         default: primitive.variable(52),
         compact: primitive.variable(52),
       ),
+      reduced: (
+        default: primitive.variable(56),
+        compact: primitive.variable(48),
+      ),
+      condensed: (
+        default: primitive.variable(60),
+        compact: primitive.variable(52),
+      ),
+      compressed: (
+        default: primitive.variable(70),
+        compact: primitive.variable(70),
+      ),
+      tightened: (
+        default: primitive.variable(76),
+        compact: primitive.variable(68),
+      ),
       tiny: (
         default: primitive.variable(80),
         compact: primitive.variable(80),
       ),
+      medium: (
+        default: primitive.variable(96),
+        compact: primitive.variable(88),
+      ),
+      small: (
+        default: primitive.variable(100),
+        compact: primitive.variable(92),
+      ),
+      snug: (
+        default: primitive.variable(140),
+        compact: primitive.variable(120),
+      ),
       tight: (
         default: primitive.variable(160),
         compact: primitive.variable(160),
@@ -210,6 +284,10 @@ $semantic-spacings: (
         default: primitive.variable(960),
         compact: primitive.variable(960),
       ),
+      xwide: (
+        default: primitive.variable(1280),
+        compact: primitive.variable(1280),
+      ),
     ),
   ),
   gap: (
@@ -220,7 +298,7 @@ $semantic-spacings: (
     tiny: (
       default: primitive.variable(2),
       compact: primitive.variable(2),
-      ),
+    ),
     tight: (
       default: primitive.variable(4),
       compact: primitive.variable(2),
@@ -312,6 +390,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),
@@ -324,6 +406,10 @@ $semantic-spacings: (
         default: primitive.variable(32),
         compact: primitive.variable(28),
       ),
+      loose: (
+        default: primitive.variable(36),
+        compact: primitive.variable(32),
+      ),
       wide: (
         default: primitive.variable(40),
         compact: primitive.variable(36),
@@ -332,6 +418,14 @@ $semantic-spacings: (
         default: primitive.variable(48),
         compact: primitive.variable(40),
       ),
+      ultra: (
+        default: primitive.variable(64),
+        compact: primitive.variable(56),
+      ),
+      xultra: (
+        default: primitive.variable(80),
+        compact: primitive.variable(76),
+      ),
     ),
     vertical: (
       none: (
@@ -350,6 +444,10 @@ $semantic-spacings: (
         default: primitive.variable(6),
         compact: primitive.variable(4),
       ),
+      tight-fixed: (
+        default: primitive.variable(6),
+        compact: primitive.variable(6),
+      ),
       base: (
         default: primitive.variable(8),
         compact: primitive.variable(4),
@@ -372,11 +470,35 @@ $semantic-spacings: (
       ),
       generous: (
         default: primitive.variable(20),
-        compact: primitive.variable(14),
+        compact: primitive.variable(16),
       ),
       relaxed: (
         default: primitive.variable(24),
-        compact: primitive.variable(16),
+        compact: primitive.variable(20),
+      ),
+      airy: (
+        default: primitive.variable(28),
+        compact: primitive.variable(24),
+      ),
+      breath: (
+        default: primitive.variable(32),
+        compact: primitive.variable(28),
+      ),
+      loose: (
+        default: primitive.variable(36),
+        compact: primitive.variable(32),
+      ),
+      wide: (
+        default: primitive.variable(40),
+        compact: primitive.variable(36),
+      ),
+      max: (
+        default: primitive.variable(48),
+        compact: primitive.variable(44),
+      ),
+      ultra: (
+        default: primitive.variable(68),
+        compact: primitive.variable(64),
       ),
     ),
   ),

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