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

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,66 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '../palette/semantic' as semantic;
+
+$prefix: mzn-effect;
+
+// 定義所有效果類型
+$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),
+    ),
+    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)}'),
+    ),
+    table-sticky: (
+      value: 1px 0 4px 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)}'),
+    ),
+  ),
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/system",
-  "version": "0.16.0",
+  "version": "1.0.0-canary.1",
   "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';
 }

package/palette/_primitives.scss

@@ -0,0 +1,267 @@
+@use 'sass:meta';
+@use '../utils/list';
+@use '../utils/map';
+
+// 定義所有可用的級距
+$primitive-scales: (25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
+
+// 定義所有可用的分類
+$primitive-categories: (
+  brand,
+  red,
+  yellow,
+  green,
+  blue,
+  gray,
+  white-base,
+  black-base,
+  brand-base
+);
+
+// CSS 變數前綴
+$primitive-prefix: mzn-color-primitive;
+
+// 預設色票定義
+$default-primitives: (
+  // 品牌色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  brand: (
+    25: #FAFAFF,
+    50: #F2F4FE,
+    100: #E2E6FD,
+    200: #C2CCFA,
+    300: #9DAAF5,
+    400: #7689EF,
+    500: #5D74E9,
+    600: #5265E1,
+    700: #4353D6,
+    800: #3340C2,
+    900: #24318F,
+    950: #1A2558,
+  ),
+  // 錯誤色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  red: (
+    25: #FFFAFA,
+    50: #FFF1F1,
+    100: #FDDDDD,
+    200: #FAB6B9,
+    300: #F88B91,
+    400: #F45D65,
+    500: #F03740,
+    600: #D03335,
+    700: #B22B2D,
+    800: #911F22,
+    900: #6D1518,
+    950: #4B0B0B,
+  ),
+  // 警告色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  yellow: (
+    25: #FFFCF5,
+    50: #FFFAEB,
+    100: #FEF0C7,
+    200: #FEDF89,
+    300: #FEC84B,
+    400: #FEB022,
+    500: #F7900A,
+    600: #DC6803,
+    700: #B54708,
+    800: #93370D,
+    900: #7A2E0E,
+    950: #4E1D09,
+  ),
+  // 成功色 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  green: (
+    25: #F3FCF7,
+    50: #E5F9EE,
+    100: #C5F0D8,
+    200: #94DFB8,
+    300: #57C78F,
+    400: #2BB26D,
+    500: #139F62,
+    600: #11985A,
+    700: #0E754D,
+    800: #0A5C41,
+    900: #064130,
+    950: #042B1B,
+  ),
+  // 一般 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  blue: (
+    25: #F5FAFF,
+    50: #EFF8FF,
+    100: #D1E9FF,
+    200: #B2DDFF,
+    300: #84CAFF,
+    400: #53B1FD,
+    500: #2E90FA,
+    600: #1570EF,
+    700: #175CD3,
+    800: #1849A9,
+    900: #194185,
+    950: #102A56,
+  ),
+  // 中性灰階 - 數字級距: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+  gray: (
+    25: #FBFBFC,
+    50: #F9FAFB,
+    100: #F3F4F6,
+    200: #E5E7EB,
+    300: #C9CBD4,
+    400: #9DA4AE,
+    500: #6C737F,
+    600: #525A61,
+    700: #404750,
+    800: #29313B,
+    900: #191E26,
+    950: #101319,
+  ),
+  // 白色系 - 特殊級距: white, white-alpha-10/20/.../90
+  white-base: (
+    white: #FFF,
+    white-alpha-5:  rgb(255 255 255 / 5%),
+    white-alpha-10: rgb(255 255 255 / 10%),
+    white-alpha-20: rgb(255 255 255 / 20%),
+    white-alpha-30: rgb(255 255 255 / 30%),
+    white-alpha-40: rgb(255 255 255 / 40%),
+    white-alpha-50: rgb(255 255 255 / 50%),
+    white-alpha-60: rgb(255 255 255 / 60%),
+    white-alpha-70: rgb(255 255 255 / 70%),
+    white-alpha-80: rgb(255 255 255 / 80%),
+    white-alpha-90: rgb(255 255 255 / 90%),
+  ),
+  // 黑色系 - 特殊級距: black, black-alpha-3/5/8/10/20/.../90
+  black-base: (
+    black: #000,
+    black-alpha-3: rgb(0 0 0 / 3%),
+    black-alpha-5: rgb(0 0 0 / 5%),
+    black-alpha-8: rgb(0 0 0 / 8%),
+    black-alpha-10: rgb(0 0 0 / 10%),
+    black-alpha-20: rgb(0 0 0 / 20%),
+    black-alpha-30: rgb(0 0 0 / 30%),
+    black-alpha-40: rgb(0 0 0 / 40%),
+    black-alpha-50: rgb(0 0 0 / 50%),
+    black-alpha-60: rgb(0 0 0 / 60%),
+    black-alpha-70: rgb(0 0 0 / 70%),
+    black-alpha-80: rgb(0 0 0 / 80%),
+    black-alpha-90: rgb(0 0 0 / 90%),
+  ),
+  // 品牌色透明度 - 特殊級距: brand-alpha-10/20/.../90
+  brand-base: (
+    brand-alpha-10: rgb(93 116 233 / 10%),
+    brand-alpha-20: rgb(93 116 233 / 20%),
+    brand-alpha-30: rgb(93 116 233 / 30%),
+    brand-alpha-40: rgb(93 116 233 / 40%),
+    brand-alpha-50: rgb(93 116 233 / 50%),
+    brand-alpha-60: rgb(93 116 233 / 60%),
+    brand-alpha-70: rgb(93 116 233 / 70%),
+    brand-alpha-80: rgb(93 116 233 / 80%),
+    brand-alpha-90: rgb(93 116 233 / 90%),
+  ),
+);
+
+// 驗證分類名稱是否有效
+@function is-valid-category($category) {
+  @return list.index($primitive-categories, $category) != null;
+}
+
+// 驗證顏色值是否已定義
+@function is-color-defined($color) {
+  @return $color != null;
+}
+
+// 取得特定分類的所有有效 scale 名稱
+@function get-valid-scales($category, $primitives: $default-primitives) {
+  $category-colors: map.get($primitives, $category);
+
+  @if not $category-colors {
+    @return ();
+  }
+
+  @return map.keys($category-colors);
+}
+
+// 驗證 scale 是否對該分類有效
+@function is-valid-scale-for-category($category, $scale, $primitives: $default-primitives) {
+  $valid-scales: get-valid-scales($category, $primitives);
+
+  @return list.index($valid-scales, $scale) != null;
+}
+
+// 取得特定分類的所有顏色
+@function get-category-colors($category, $primitives: $default-primitives) {
+  @if not is-valid-category($category) {
+    @error 'Invalid category "#{$category}". Valid categories are: #{$primitive-categories}';
+  }
+
+  @return map.get($primitives, $category);
+}
+
+// 取得特定分類和級距的顏色值
+@function get-color($category, $scale, $primitives: $default-primitives) {
+  @if not is-valid-category($category) {
+    @error 'Invalid category "#{$category}". Valid categories are: #{$primitive-categories}';
+  }
+
+  @if not is-valid-scale-for-category($category, $scale, $primitives) {
+    $valid-scales: get-valid-scales($category, $primitives);
+
+    @error 'Invalid scale "#{$scale}" for category "#{$category}". Valid scales are: #{$valid-scales}';
+  }
+
+  $category-colors: map.get($primitives, $category);
+  $color: map.get($category-colors, $scale);
+
+  @if not is-color-defined($color) {
+    @error 'Color not defined for #{$category}-#{$scale}';
+  }
+
+  @return $color;
+}
+
+// 取得 CSS 變數名稱
+// e.g: --mzn-color-primitive-brand-500
+@function get-var-name($category, $scale) {
+  @if $primitive-prefix == '' {
+    @return --#{$category}-#{$scale};
+  }
+
+  @return --#{$primitive-prefix}-#{$category}-#{$scale};
+}
+
+// 使用 CSS 變數引用顏色
+@function variable($category, $scale) {
+  @if not is-valid-category($category) {
+    @error 'Invalid category "#{$category}". Valid categories are: #{$primitive-categories}';
+  }
+
+  @if not is-valid-scale-for-category($category, $scale) {
+    $valid-scales: get-valid-scales($category);
+
+    @error 'Invalid scale "#{$scale}" for category "#{$category}". Valid scales are: #{$valid-scales}';
+  }
+
+  @return var(#{get-var-name($category, $scale)});
+}
+
+// 生成所有 CSS 變數
+@mixin variables($primitives: (), $skip-undefined: true) {
+  $primitives: map.deep-merge($default-primitives, $primitives);
+
+  @each $category, $colors in $primitives {
+    @if not is-valid-category($category) {
+      @error 'Invalid category "#{$category}" in primitives map. Valid categories are: #{$primitive-categories}';
+    }
+
+    @each $scale, $color in $colors {
+      @if not is-valid-scale-for-category($category, $scale, $primitives) {
+        $valid-scales: get-valid-scales($category, $primitives);
+
+        @error 'Invalid scale "#{$scale}" for category "#{$category}". Valid scales are: #{$valid-scales}';
+      }
+
+      @if is-color-defined($color) {
+        #{get-var-name($category, $scale)}: #{$color};
+      } @else if not $skip-undefined {
+        @error 'Color not defined for #{$category}-#{$scale}';
+      }
+    }
+  }
+}