@mezzanine-ui/system 0.16.0 → 1.0.0-alpha.0

package/radius/_radius.scss

@@ -0,0 +1,71 @@
+@use '../utils/list';
+@use '../utils/map';
+
+$prefix: mzn-radius;
+
+// 定義所有可用的 radius 尺寸
+$radius-sizes: (none, tiny, base, roomy, full);
+
+// 預設 radius 值定義
+$default-radius: (
+  none: 0,
+  tiny: 0.125rem,   // 2px
+  base: 0.25rem,    // 4px
+  roomy: 0.5rem,  // 8px
+  full: 62.4375rem, // 999px
+);
+
+// 驗證 radius size 是否有效
+@function is-valid-size($size) {
+  @return list.index($radius-sizes, $size) != null;
+}
+
+// 取得特定 size 的 radius 值
+@function get-radius($size, $radius: $default-radius) {
+  @if not is-valid-size($size) {
+    @error 'Invalid radius size "#{$size}". Valid sizes are: #{$radius-sizes}';
+  }
+
+  $value: map.get($radius, $size);
+
+  @if not $value and $value != 0 {
+    @error 'Radius value not defined for size "#{$size}"';
+  }
+
+  @return $value;
+}
+
+// 取得 CSS 變數名稱
+// 例如: --mzn-radius-base
+@function get-var-name($size) {
+  @if $prefix == '' {
+    @return --#{$size};
+  }
+
+  @return --#{$prefix}-#{$size};
+}
+
+// 使用 CSS 變數引用 radius
+// 例如: radius(base) => var(--mzn-radius-base)
+@function variable($size) {
+  @if not is-valid-size($size) {
+    @error 'Invalid radius size "#{$size}". Valid sizes are: #{$radius-sizes}';
+  }
+
+  @return var(#{get-var-name($size)});
+}
+
+// 生成所有 radius CSS 變數
+@mixin variables($radius: ()) {
+  $radius: map.deep-merge($default-radius, $radius);
+
+  @each $size, $value in $radius {
+    @if not is-valid-size($size) {
+      @error 'Invalid radius size "#{$size}" in radius map. Valid sizes are: #{$radius-sizes}';
+    }
+
+    @if $value or $value == 0 {
+      #{get-var-name($size)}: #{$value};
+    }
+  }
+}

package/radius/constants.d.ts

@@ -0,0 +1 @@
+export declare const radiusPrefix = "mzn-radius";

package/radius/constants.js

@@ -0,0 +1,3 @@
+const radiusPrefix = 'mzn-radius';
+
+export { radiusPrefix };

package/radius/index.d.ts

@@ -0,0 +1,3 @@
+export type { RadiusSize, RadiusConfig } from './radius';
+export { radiusPrefix } from './constants';
+export { defaultRadius, radiusSizes, isValidRadiusSize, getRadiusVarName, getRadiusVar, } from './radius';

package/radius/index.js

@@ -0,0 +1,2 @@
+export { radiusPrefix } from './constants.js';
+export { defaultRadius, getRadiusVar, getRadiusVarName, isValidRadiusSize, radiusSizes } from './radius.js';

package/radius/radius.d.ts

@@ -0,0 +1,18 @@
+export type RadiusSize = 'none' | 'tiny' | 'base' | 'roomy' | 'full';
+export interface RadiusConfig {
+    none?: string | number;
+    tiny?: string | number;
+    base?: string | number;
+    roomy?: string | number;
+    full?: string | number;
+}
+export declare const defaultRadius: Required<RadiusConfig>;
+export declare const radiusSizes: readonly RadiusSize[];
+export declare function isValidRadiusSize(size: string): size is RadiusSize;
+export declare function getRadiusVarName(size: RadiusSize, prefix?: string): string;
+/**
+ * Get CSS variable reference for radius
+ * @example
+ * getRadiusVar('base') // 'var(--mzn-radius-base)'
+ */
+export declare function getRadiusVar(size: RadiusSize, prefix?: string): string;

package/radius/radius.js

@@ -0,0 +1,32 @@
+import { radiusPrefix } from './constants.js';
+
+const defaultRadius = {
+    none: 0,
+    tiny: '0.125rem', // 2px
+    base: '0.25rem', // 4px
+    roomy: '0.5rem', // 8px
+    full: '62.4375rem', // 999px
+};
+const radiusSizes = [
+    'none',
+    'tiny',
+    'base',
+    'roomy',
+    'full',
+];
+function isValidRadiusSize(size) {
+    return radiusSizes.includes(size);
+}
+function getRadiusVarName(size, prefix = radiusPrefix) {
+    return prefix ? `--${prefix}-${size}` : `--${size}`;
+}
+/**
+ * Get CSS variable reference for radius
+ * @example
+ * getRadiusVar('base') // 'var(--mzn-radius-base)'
+ */
+function getRadiusVar(size, prefix = radiusPrefix) {
+    return `var(${getRadiusVarName(size, prefix)})`;
+}
+
+export { defaultRadius, getRadiusVar, getRadiusVarName, isValidRadiusSize, radiusSizes };

package/size/_size.scss

@@ -1,4 +1,9 @@
-@use 'sass:list';
+@use '../utils/list';
 
+/** @deprecated */
 $sizes: (small, medium, large);
+
+/** @deprecated */
 $sizes-with-extra-large: list.append($sizes, extra-large);
+
+$general-sizes: (main, sub, minor);

package/size/size.d.ts

@@ -1 +1,3 @@
+/** @deprecated use 'GeneralSize' instead */
 export type Size = 'small' | 'medium' | 'large';
+export type GeneralSize = 'main' | 'sub' | 'minor';

package/spacing/_index.scss

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

package/spacing/_primitives.scss

@@ -0,0 +1,137 @@
+@use '../typography/utils' as typography-utils;
+@use '../utils/list';
+@use '../utils/map';
+
+// CSS 變數前綴
+$prefix: mzn-spacing-primitive;
+
+// 定義所有可用的 spacing 級距（單位為 px）
+$primitive-scales: (
+  0,
+  1,
+  2,
+  3,
+  4,
+  6,
+  8,
+  10,
+  12,
+  14,
+  16,
+  18,
+  20,
+  24,
+  28,
+  32,
+  36,
+  40,
+  48,
+  52,
+  56,
+  60,
+  64,
+  70,
+  80,
+  140,
+  160,
+  240,
+  320,
+  360,
+  400,
+  480,
+  560,
+  640,
+  720,
+  960,
+  1140
+);
+
+// 預設 spacing 值定義（px 會自動轉換為 rem）
+$default-primitives: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  6: 6px,
+  8: 8px,
+  10: 10px,
+  12: 12px,
+  14: 14px,
+  16: 16px,
+  18: 18px,
+  20: 20px,
+  24: 24px,
+  28: 28px,
+  32: 32px,
+  36: 36px,
+  40: 40px,
+  48: 48px,
+  52: 52px,
+  56: 56px,
+  60: 60px,
+  64: 64px,
+  70: 70px,
+  80: 80px,
+  140: 140px,
+  160: 160px,
+  240: 240px,
+  320: 320px,
+  360: 360px,
+  400: 400px,
+  480: 480px,
+  560: 560px,
+  640: 640px,
+  720: 720px,
+  960: 960px,
+  1140: 1140px,
+);
+
+// 驗證 scale 是否有效
+@function is-valid-scale($scale) {
+  @return list.index($primitive-scales, $scale) != null;
+}
+
+// 驗證 spacing 值是否已定義
+@function is-spacing-defined($spacing) {
+  @return $spacing != null;
+}
+
+// 取得 CSS 變數名稱
+// 例如: --mzn-spacing-primitive-16
+@function get-var-name($scale) {
+  @if $prefix == '' {
+    @return --#{$scale};
+  }
+
+  @return --#{$prefix}-#{$scale};
+}
+
+// 使用 CSS 變數引用 spacing
+// 例如: variable(16) => var(--mzn-spacing-primitive-16)
+@function variable($scale) {
+  @if not is-valid-scale($scale) {
+    @error 'Invalid spacing scale "#{$scale}". Valid scales are: #{$primitive-scales}';
+  }
+
+  @return var(#{get-var-name($scale)});
+}
+
+// 生成所有 spacing primitive CSS 變數
+@mixin variables($primitives: ()) {
+  $primitives: map.deep-merge($default-primitives, $primitives);
+
+  @each $scale, $value in $primitives {
+    @if not is-valid-scale($scale) {
+      @error 'Invalid spacing scale "#{$scale}" in primitives map. Valid scales are: #{$primitive-scales}';
+    }
+
+    @if is-spacing-defined($value) {
+      @if $value == 0 {
+        #{get-var-name($scale)}: 0;
+      } @else {
+        #{get-var-name($scale)}: #{typography-utils.px-to-rem($value)};
+      }
+    }
+  }
+}