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

package/_system.scss

@@ -3,13 +3,19 @@
 @use './spacing';
 @use './typography';
 @use './z-index';
+@use './radius';
+@use './effect';
 @use './palette' as system-palette;
 
-@mixin common-variables($options: ()) {
+@mixin common-variables($mode: default, $options: ()) {
   $motion: map.get($options, motion);
   $spacing: map.get($options, spacing);
   $typography: map.get($options, typography);
+  $typography-primitives: map.get($options, typography-primitives);
   $z-index: map.get($options, z-index);
+  $radius: map.get($options, radius);
+
+  @include effect.variables();
 
   @if not $motion {
     @include motion.variables();
@@ -18,15 +24,41 @@
   }
 
   @if not $spacing {
-    @include spacing.variables();
+    @include spacing.semantic-variables($mode);
+  } @else {
+    @include spacing.semantic-variables($mode, $spacing);
+  }
+
+  @if not $typography-primitives {
+    @include typography.primitive-variables();
+  } @else {
+    $font-families: map.get($typography-primitives, font-families) or ();
+    $font-weights: map.get($typography-primitives, font-weights) or ();
+    $font-sizes: map.get($typography-primitives, font-sizes) or ();
+    $line-heights: map.get($typography-primitives, line-heights) or ();
+    $letter-spacings: map.get($typography-primitives, letter-spacings) or ();
+
+    @include typography.primitive-variables(
+      $font-families,
+      $font-weights,
+      $font-sizes,
+      $line-heights,
+      $letter-spacings
+    );
+  }
+
+  @if not $typography-primitives {
+    font-family: typography.primitive-get-font-family-list();
   } @else {
-    @include spacing.variables($spacing);
+    $font-families: map.get($typography-primitives, font-families) or ();
+
+    font-family: typography.primitive-get-font-family-list($font-families);
   }
 
   @if not $typography {
-    @include typography.variables();
+    @include typography.semantic-variables();
   } @else {
-    @include typography.variables($typography);
+    @include typography.semantic-variables($typography);
   }
 
   @if not $z-index {
@@ -34,8 +66,15 @@
   } @else {
     @include z-index.variables($z-index);
   }
+
+  @if not $radius {
+    @include radius.variables();
+  } @else {
+    @include radius.variables($radius);
+  }
 }
 
-@mixin palette($mode: 'light', $palette: ()) {
-  @include system-palette.variables($mode, $palette);
+@mixin colors($mode: 'light', $semantic: (), $primitives: ()) {
+  @include system-palette.primitive-variables($primitives);
+  @include system-palette.semantic-variables($mode, $semantic);
 }

package/effect/_effect.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '../palette/semantic' as semantic;
+
+$prefix: mzn-effect;
+
+// 定義所有效果類型
+$effect-contexts: (shadow, focus);
+
+$effect-values: (
+  shadow: (
+    raised: (
+      value: 0 0 6px 0 semantic.variable(shadow, dark),
+    ),
+    floating: (
+      value: 0 0 16px 0 semantic.variable(shadow, dark),
+    ),
+    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)}'),
+    ),
+    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: (
+      value: string.unquote('0 0 0 1px #{semantic.variable(background, base)}, 0 0 0 2px #{semantic.variable(background, brand)}'),
+    ),
+    error: (
+      value: string.unquote('0 0 0 1px #{semantic.variable(background, base)}, 0 0 0 2px #{semantic.variable(background, error)}'),
+    ),
+  ),
+);
+
+/**
+ * 取得 effect 變數名稱
+ * @param {string} $context - 效果情境 (shadow, focus)
+ * @param {string} $type - 效果類型
+ * @example
+ * variable(shadow, raised) => var(--mzn-effect-shadow-raised)
+ */
+@function variable($context, $type) {
+  @return var(--#{$prefix}-#{$context}-#{$type});
+}
+
+/**
+ * 定義 CSS 變數
+ * @example
+ * @include variables();
+ */
+@mixin variables() {
+  @each $context, $types in $effect-values {
+    @each $type, $config in $types {
+      --#{$prefix}-#{$context}-#{$type}: #{map.get($config, value)};
+    }
+  }
+}

package/effect/_index.scss

@@ -0,0 +1 @@
+@forward './effect';

package/effect/constants.d.ts

@@ -0,0 +1 @@
+export declare const effectPrefix = "mzn-effect";

package/effect/constants.js

@@ -0,0 +1,3 @@
+const effectPrefix = 'mzn-effect';
+
+export { effectPrefix };

package/effect/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './typings';

package/effect/index.js

@@ -0,0 +1 @@
+export { effectPrefix } from './constants.js';

package/effect/typings.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Shadow types - 陰影類型
+ */
+export type ShadowType = 'none' | 'raised' | 'floating' | 'modal' | 'table-sticky' | 'slider-handle' | 'inner-top-and-bottom';
+/**
+ * Focus types - 聚焦類型
+ */
+export type FocusType = 'primary' | 'error';
+/**
+ * Effect contexts - 效果情境
+ */
+export type EffectContext = 'shadow' | 'focus';
+/**
+ * Effect type mapping
+ */
+export type EffectTypeMap = {
+    shadow: ShadowType;
+    focus: FocusType;
+};
+/**
+ * 取得特定 context 的 type
+ */
+export type EffectTypeFor<C extends EffectContext> = EffectTypeMap[C];
+/**
+ * Effect 完整型別 - context + type 組合
+ * @example
+ * const effect: Effect = 'shadow-raised';
+ * const effect2: Effect = 'focus-primary';
+ */
+export type Effect = {
+    [C in EffectContext]: `${C}-${EffectTypeFor<C>}`;
+}[EffectContext];

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

package/palette/_index.scss

@@ -1 +1,3 @@
-@forward './palette';
+@forward './palette'; // @deprecated
+@forward './primitives' as primitive-*;
+@forward './semantic' as semantic-*;

package/palette/_palette.scss

@@ -1,206 +1,6 @@
-@use 'sass:meta';
-@use '../utils/list';
-@use '../utils/map';
-
-$prefix: mzn-color;
-
-@function _get-main-related-color-names($color) {
-  @return ($color, #{$color}-light, #{$color}-dark, #{$color}-hover-bg, #{$color}-active-bg, on-#{$color});
-}
-
-@function _get-main-color-transformed-palette($color) {
-  $rgba: meta.get-function('rgba');
-
-  @return (
-    #{$color}-hover-bg: (
-      from: #{$color}-light,
-      transformer: $rgba,
-      args: (
-        0.15,
-      )
-    ),
-    #{$color}-active-bg: (
-      from: $color,
-      transformer: $rgba,
-      args: (
-        0.2,
-      )
-    )
-  );
-}
-
-@function _transform-color-from-palette($palette, $config) {
-  $transformer: map.get($config, transformer);
-  $from: map.get($palette, map.get($config, from));
-  $args: map.get($config, args);
-
-  @return meta.call($transformer, $from, $args...);
-}
-
-$main-color-names: (primary, secondary, error, warning, success);
-$color-names: list.flat-push(
-  list.flat-map($main-color-names, meta.get-function('_get-main-related-color-names')),
-  (
-    text-primary,
-    text-secondary,
-    text-disabled,
-    action-active,
-    action-inactive,
-    action-disabled,
-    action-disabled-bg,
-    bg,
-    surface,
-    border,
-    divider,
-    overlay-bg,
-    overlay-surface-bg
-  )
-);
-
-$default-semantic-palette: map.assign(
-  (
-    error: #db2b1d,
-    error-light: #f75142,
-    error-dark: #c00f03,
-    on-error: #fff,
-  ),
-  _get-main-color-transformed-palette(error),
-  (
-    warning: #f7ac38,
-    warning-light: #fdd948,
-    warning-dark: #f1842b,
-    on-warning: #fff,
-  ),
-  _get-main-color-transformed-palette(warning),
-  (
-    success: #2e8d36,
-    success-light: #42ae4a,
-    success-dark: #0c5d19,
-    on-success: #fff,
-  ),
-  _get-main-color-transformed-palette(success)
-);
-
-$default-light-palette: map.assign(
-  (
-    primary: #465bc7,
-    primary-light: #778de8,
-    primary-dark: #2d2d9e,
-    on-primary: #fff,
-  ),
-  _get-main-color-transformed-palette(primary),
-  (
-    secondary: #383838,
-    secondary-light: #6a6a6a,
-    secondary-dark: #161616,
-    on-secondary: #fff,
-  ),
-  _get-main-color-transformed-palette(secondary),
-  $default-semantic-palette,
-  (
-    text-primary: #161616,
-    text-secondary: #8f8f8f,
-    text-disabled: #bcbcbc,
-    action-active: #161616,
-    action-inactive: #8f8f8f,
-    action-disabled: #bcbcbc,
-    action-disabled-bg: #e5e5e5,
-    bg: #f4f4f4,
-    surface: #fff,
-    border: #d9d9d9,
-    divider: #f2f2f2,
-    overlay-bg: (
-      from: action-active,
-      transformer: meta.get-function('rgba'),
-      args: (
-        0.5,
-      ),
-    ),
-    overlay-surface-bg: (
-      from: surface,
-      transformer: meta.get-function('rgba'),
-      args: (
-        0.9,
-      ),
-    ),
-  )
-);
-
-$default-dark-palette: map.assign(
-  (
-    primary: #667cd8,
-    primary-light: #92a7ff,
-    primary-dark: #3440b2,
-    on-primary: #fff,
-  ),
-  _get-main-color-transformed-palette(primary),
-  (
-    secondary: #6a6a6a,
-    secondary-light: #b2b2b2,
-    secondary-dark: #383838,
-    on-secondary: #fff,
-  ),
-  _get-main-color-transformed-palette(secondary),
-  $default-semantic-palette,
-  (
-    text-primary: #fff,
-    text-secondary: #a8a8a8,
-    text-disabled: #595959,
-    action-active: #fff,
-    action-inactive: #a8a8a8,
-    action-disabled: #595959,
-    action-disabled-bg: #393939,
-    bg: #161616,
-    surface: #242424,
-    border: #7c7c7c,
-    divider: #494949,
-    overlay-bg: (
-      from: action-active,
-      transformer: meta.get-function('rgba'),
-      args: (
-        0.5,
-      ),
-    ),
-    overlay-surface-bg: (
-      from: surface,
-      transformer: meta.get-function('rgba'),
-      args: (
-        0.9,
-      ),
-    ),
-  )
-);
-
-$default-palette: (
-  light: $default-light-palette,
-  dark: $default-dark-palette,
-);
-
-@function is-color-name-valid($color-name) {
-  @return list.includes($color-names, $color-name);
-}
-
-@mixin variables($mode, $palette: ()) {
-  $palette: map.deep-merge($default-palette, $palette);
-  $palette: map.get($palette, $mode);
-
-  @each $color-name, $color in $palette {
-    @if not is-color-name-valid($color-name) {
-      @error 'Invalid color name #{$color-name}. Please choose one of #{$color-names}';
-    }
-
-    @if meta.type-of($color) != 'color' {
-      $color: _transform-color-from-palette($palette, $color);
-    }
-
-    --#{$prefix}-#{$color-name}: #{$color};
-  }
-}
-
+/* @deprecated */
 @function color($color-name) {
-  @if not is-color-name-valid($color-name) {
-    @error 'Invalid color name #{$color-name}. Please choose one of #{$color-names}';
-  }
+  @warn "This 'color' function is deprecated. Please use 'palette.semantic-variable' instead.";
 
-  @return var(--#{$prefix}-#{$color-name});
+  @return 'none';
 }