@nopon-web/styles 0.1.0 → 0.2.1

package/_config.scss

@@ -1,9 +1,12 @@
+// bem
 $namespace: "s" !default;
 $common-separator: "-" !default;
 $element-separator: "__" !default;
 $modifier-separator: "--" !default;
 $state-prefix: "is" !default;
-
 $theme-prefix: "theme" !default;
 $theme-name: "" !default;
-$theme-font-prefix: "text" !default;
+
+// vars
+$var-css-registered: true !default; // 是否已经注册 CSS Variables
+$var-runtime-mode: value !default; // var运行时模式, value = 编译期计算, css   = 运行时 calc + var

package/atomic/_flex.scss

@@ -1,35 +1,85 @@
 @use "../mixin/index" as mx;
 
 $flex: (
-	1: 1 1 0%,
-	auto: 1 1 auto,
-	initial: 0 1 auto,
-	none: none,
+	1: (
+		flex: 1 1 0%,
+	),
+	auto: (
+		flex: 1 1 auto,
+	),
+	initial: (
+		flex: 0 1 auto,
+	),
+	none: (
+		flex: none,
+	),
 );
 
 $flex-justify: (
-	normal: normal,
-	start: flex-start,
-	end: flex-end,
-	center: center,
-	between: space-between,
-	around: space-around,
-	evenly: space-evenly,
-	stretch: stretch,
+	normal: (
+		justify-content: normal,
+	),
+	start: (
+		justify-content: flex-start,
+	),
+	end: (
+		justify-content: flex-end,
+	),
+	center: (
+		justify-content: center,
+	),
+	between: (
+		justify-content: space-between,
+	),
+	around: (
+		justify-content: space-around,
+	),
+	evenly: (
+		justify-content: space-evenly,
+	),
+	stretch: (
+		justify-content: stretch,
+	),
 );
 
 $flex-align: (
-	start: flex-start,
-	end: flex-end,
-	center: center,
-	baseline: baseline,
-	stretch: stretch,
+	start: (
+		align-items: flex-start,
+	),
+	end: (
+		align-items: flex-end,
+	),
+	center: (
+		align-items: center,
+	),
+	baseline: (
+		align-items: baseline,
+	),
+	stretch: (
+		align-items: stretch,
+	),
+);
+
+$flex-direction: (
+	row: (
+		flex-direction: row,
+	),
+	row-reverse: (
+		flex-direction: row-reverse,
+	),
+	col: (
+		flex-direction: column,
+	),
+	col-reverse: (
+		flex-direction: column-reverse,
+	),
 );
 
 .flex {
-  display: flex;
+	display: flex;
 }
 
-@include mx.generate-atomic("flex", flex, $flex);
-@include mx.generate-atomic("justify", justify-content, $flex-justify);
-@include mx.generate-atomic("items", align-items, $flex-align);
+@include mx.generate-atomic("flex", $flex);
+@include mx.generate-atomic("justify", $flex-justify);
+@include mx.generate-atomic("items", $flex-align);
+@include mx.generate-atomic("flex", $flex-direction);

package/atomic/_font.scss

@@ -0,0 +1,13 @@
+@use "../mixin/index" as mx;
+
+$font-weight: (
+  thin: (font-weight: 100),
+  extralight: (font-weight: 200),
+  light: (font-weight: 300),
+  normal: (font-weight: 400),
+  medium: (font-weight: 500),
+  semibold: (font-weight: 600),
+  bold: (font-weight: 700),
+);
+
+@include mx.generate-atomic("font", $font-weight);

package/atomic/_text.scss

@@ -0,0 +1,10 @@
+@use "../mixin/index" as mx;
+
+$text-decoration-line: (
+  underline: (text-decoration-line: underline),
+  overline: (text-decoration-line: overline),
+  line-through: (text-decoration-line: line-through),
+  no-underline: (text-decoration-line: none),
+);
+
+@include mx.generate-atomic(null, $text-decoration-line);

package/atomic/index.scss

@@ -1 +1,3 @@
-@use "./flex";
+@use "./flex";
+@use "./font";
+@use "./text";

package/components/button.scss

@@ -0,0 +1,134 @@
+@use '../function/index' as fn;
+@use '../mixin/index' as mx;
+
+@include mx.b(button) {
+	@include mx.var-register(button);
+	position: relative;
+	display: inline-block;
+	padding: fn.var-get(button, padding);
+	line-height: 1;
+	border: none;
+	border-radius: fn.var-get(button, radius, base);
+	font-size: fn.var-get(button, size, text);
+	color: fn.var-get(button, color, text, base);
+	background-color: transparent;
+	box-sizing: border-box;
+	overflow: hidden;
+	cursor: pointer;
+
+	+ .#{fn.bem(button)} {
+		margin-left: fn.var-get(button, gap);
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 0;
+		display: block;
+		width: 100%;
+		height: 100%;
+		background-color: fn.var-get(button, color, bg, base);
+	}
+
+	// 内容
+	@include mx.e(content) {
+		position: relative;
+		z-index: 1;
+	}
+
+	&:hover,
+	&:active,
+	&:focus {
+		color: fn.var-get(button, color, text, hover);
+
+		&::after {
+			background-color: fn.var-get(button, color, bg, hover);
+		}
+	}
+
+	// 类型
+	@include mx.m(primary) {
+		--#{fn.var-get-name(button, color, text, base)}: #{fn.var-get(color, text, inverse, 500)};
+		--#{fn.var-get-name(button, color, bg, base)}: #{fn.var-get(button, color, theme, 500)};
+
+		&:active,
+		&:focus {
+			--#{fn.var-get-name(button, color, text,hover)}: #{fn.var-get(color, text, inverse, 500)};
+			--#{fn.var-get-name(button, color, bg, hover)}: #{fn.var-get(button, color, theme, 500)};
+		}
+	}
+
+	// 大小
+	@include mx.m(small) {
+		--#{fn.var-get-name(button, size, base)}: #{fn.var-get(text, 2xl)};
+		--#{fn.var-get-name(button, size, text)}: #{fn.var-get(text, xs)};
+		--#{fn.var-get-name(button, padding)}: #{fn.var-get(text, 4xs)} #{fn.var-get(text, xs)};
+	}
+
+	@include mx.m(large) {
+		--#{fn.var-get-name(button, size, base)}: #{fn.var-get(text, 4xl)};
+		--#{fn.var-get-name(button, padding)}: #{fn.var-get(text, sm)} #{fn.var-get(text, lg)};
+	}
+
+	// 朴素
+	@include mx.when(plain) {
+		--#{fn.var-get-name(button, color, bg, base)}: transparent;
+		--#{fn.var-get-name(button, color, bg, hover)}: transparent;
+		border-width: fn.var-get(button, border, width);
+		border-style: fn.var-get(button, border, style);
+		border-color: fn.var-get(button, border, color, base);
+
+		&:hover,
+		&:active,
+		&:focus {
+			border-color: fn.var-get(button, border, color, hover);
+		}
+
+		&.#{fn.bem(button, '', primary)} {
+			--#{fn.var-get-name(button, color, text, base)}: #{fn.var-get(button, color, theme, 500)};
+			--#{fn.var-get-name(button, border, color, base)}: #{fn.var-get(button, color, theme, 500)};
+
+			&:hover,
+			&:active,
+			&:focus {
+        --#{fn.var-get-name(button, color, text, hover)}: #{fn.var-get(button, color, theme, 500)};
+        --#{fn.var-get-name(button, color, bg, hover)}: #{fn.var-get(button, color, theme, 50)};
+			}
+		}
+	}
+
+	// 椭圆
+	@include mx.when(round) {
+		border-radius: fn.var-get(button, radius, round);
+	}
+
+	// 圆型
+	@include mx.when(circle) {
+		width: #{fn.var-get(button, size, base)};
+		height: #{fn.var-get(button, size, base)};
+		border-radius: fn.var-get(button, radius, circle);
+		padding: 0;
+	}
+
+	// 文本
+	@include mx.when(text) {
+		--#{fn.var-get-name(button, color, bg, base)}: transparent;
+
+		&.#{fn.bem(button, '', primary)} {
+			--#{fn.var-get-name(button, color, text, base)}: #{fn.var-get(button, color, theme, 500)};
+		}
+	}
+
+	// 背景
+	@include mx.when(no-bg) {
+		--#{fn.var-get-name(button, color, bg, base)}: transparent;
+		--#{fn.var-get-name(button, color, bg, hover)}: transparent;
+		--#{fn.var-get-name(button, color, text, hover)}: #{fn.var-get(button, color, theme, 500)};
+
+		&.#{fn.bem(button, '', primary)} {
+			--#{fn.var-get-name(button, color, text, base)}: #{fn.var-get(button, color, theme, 500)};
+		}
+	}
+}

package/components/icon.scss

@@ -1,7 +1,14 @@
+@use "../function/index" as fn;
 @use "../mixin/index" as mx;
 
 @include mx.b("icon") {
-	display: inline-block;
-	vertical-align: middle;
-	color: inherit;
-}
+  display: inline-block;
+  vertical-align: middle;
+  color: inherit;
+
+  &.#{fn.bem(image)} {
+    .#{fn.bem(image, content)} {
+      display: block;
+    }
+  }
+}

package/components/progress.scss

@@ -28,14 +28,14 @@ Example HTML:
 	--progress-segment-point-width: #{fn.u(30)}; // 节点大小
 	--progress-segment-point-transform: translateX(50%); // 节点中心偏移
 	--progress-segment-point-bg: linear-gradient(0deg, var(--color-base-500), var(--color-base-500)); // 节点背景
-	--progress-segment-point-bg-active: linear-gradient(0deg, var(--theme-color-500), var(--theme-color-500)); // 节点背景
+	--progress-segment-point-bg-active: linear-gradient(0deg, var(--color-theme-500), var(--color-theme-500)); // 节点背景
 	--progress-segment-content-transform: translateX(50%); // 内容中心偏移
 
 	--progress-bar-height: #{fn.u(20)}; // 进度条高度
 	--progress-bar-radius: #{fn.u(10)}; // 进度条(内外)圆角
 	--progress-bar-outer-bg: linear-gradient(0deg, var(--color-base-250), var(--color-base-250)); // 外背景
 	--progress-bar-outer-padding: 0; // 外边距
-	--progress-bar-inner-bg: linear-gradient(0deg, var(--theme-color-500), var(--theme-color-500)); // 内背景
+	--progress-bar-inner-bg: linear-gradient(0deg, var(--color-theme-500), var(--color-theme-500)); // 内背景
 	overflow-x: scroll;
 
 	@include mx.e(wrapper) {

package/components/scroll-bar.scss

@@ -27,7 +27,7 @@
     }
 
     &_thumb {
-      background-color: var(--theme-color);
+      background-color: var(--color-theme);
     }
   }
 }

package/components/text.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "../_config"as cfg;
-@use "../_variables" as vars;
+@use "../variables/index" as vars;
 @use "../function/index" as fn;
 @use "../mixin/index" as mx;
 
@@ -8,6 +8,7 @@
   display: inline-block;
   line-height: 1;
   vertical-align: middle;
+  color: #{fn.var-get(color, text, 500)};
 
   @include mx.when("ellipsis") {
     width: 100%;
@@ -16,13 +17,10 @@
     overflow: hidden;
   }
 
-  @each $step, $data in vars.$text-scale {
-    $ratio: map.get($data, ratio);
-    $token: map.get($data, token);
-    
+  @each $k, $v in vars.$text {
     // 生成字体尺寸
-    @include mx.m($token) {
-      font-size: var(#{fn.css-var-name(cfg.$theme-font-prefix, $token)});
+    @include mx.m($k) {
+      font-size: #{fn.var-get(text, $k)};
     }
   }
 

package/function/_variables.scss

@@ -0,0 +1,226 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "sass:math";
+@use "sass:string";
+
+@use "../_config" as cfg;
+@use "../variables/index" as vars;
+
+/* ===================================================== */
+/* 1️⃣ 类型判断 */
+/* ===================================================== */
+
+@function var-value-is-ref($value) {
+	@return meta.type-of($value) == "map" and map.has-key($value, ref);
+}
+
+@function var-value-is-calc($value) {
+	@return meta.type-of($value) == "map" and map.has-key($value, calc);
+}
+
+/* ===================================================== */
+/* 2️⃣ 变量名生成 */
+/* ===================================================== */
+
+@function var-get-name($path...) {
+	$name: "";
+
+	@for $i from 1 through list.length($path) {
+		$part: list.nth($path, $i);
+
+		@if $i == 1 {
+			$name: "#{$part}";
+		} @else {
+			$name: "#{$name}-#{$part}";
+		}
+	}
+
+	@return $name;
+}
+
+/* ===================================================== */
+/* 3️⃣ 读取嵌套 map */
+/* ===================================================== */
+
+@function var-get-value($path...) {
+	$modules: meta.module-variables("vars");
+	$root: list.nth($path, 1);
+
+	@if not map.has-key($modules, $root) {
+		@return null;
+	}
+
+	$value: map.get($modules, $root);
+
+	@if list.length($path) > 1 {
+		@for $i from 2 through list.length($path) {
+			$key: list.nth($path, $i);
+
+			@if meta.type-of($value) != "map" or not map.has-key($value, $key) {
+				@return null;
+			}
+
+			$value: map.get($value, $key);
+		}
+	}
+
+	$result: $value;
+
+	// ref
+	@if var-value-is-ref($value) {
+		$result: var-get-ref($value, cfg.$var-runtime-mode);
+	}
+
+	// calc
+	@else if var-value-is-calc($value) {
+		$result: var-get-calc($value, cfg.$var-runtime-mode);
+	}
+
+	// list
+	@else if meta.type-of($value) == "list" {
+		$list-result: ();
+
+		@each $item in $value {
+			$resolved: $item;
+
+			@if var-value-is-ref($item) {
+				$resolved: var-get-ref($item, cfg.$var-runtime-mode);
+			} @else if var-value-is-calc($item) {
+				$resolved: var-get-calc($item, cfg.$var-runtime-mode);
+			}
+
+			$list-result: list.append($list-result, $resolved, space);
+		}
+
+		$result: $list-result;
+	}
+
+	@return $result;
+}
+
+/* ===================================================== */
+/* 4️⃣ 解析 ref（统一模式） */
+/* ===================================================== */
+
+@function var-get-ref($ref-value, $mode: value) {
+	$path: map.get($ref-value, ref);
+
+	// 先拿真实值（永远可用）
+	$fallback: var-get-value($path...);
+
+	@if $fallback == null {
+		@error "Ref path not found: #{$path}";
+	}
+
+	/* =========================
+    未注册 CSS 变量
+    强制返回真实值
+  ========================= */
+
+	@if cfg.$var-css-registered == false {
+		@return $fallback;
+	}
+
+	/* =========================
+    CSS 模式
+  ========================= */
+
+	@if $mode == css {
+		$name: var-get-name($path...);
+		@return string.unquote("var(--#{$name}, #{$fallback})");
+	}
+
+	/* =========================
+    value 模式
+  ========================= */
+
+	@return $fallback;
+}
+
+/* ===================================================== */
+/* 5️⃣ 解析 calc（统一模式） */
+/* ===================================================== */
+
+@function var-get-calc($value, $mode: value) {
+	$parts: map.get($value, calc);
+
+	/* =========================
+    CSS 模式
+  ========================= */
+
+	@if $mode == css {
+		$string: "";
+
+		@each $item in $parts {
+			@if $item == "+" or $item == "-" or $item == "*" or $item == "/" {
+				$string: "#{$string} #{$item} ";
+			} @else {
+				$current: $item;
+
+				@if var-value-is-ref($item) {
+					$current: var-get-ref($item, css);
+				}
+
+				$string: "#{$string}#{$current}";
+			}
+		}
+
+		@return string.unquote("calc(#{$string})");
+	}
+
+	/* =========================
+    value 模式（编译期计算）
+  ========================= */
+
+	$result: null;
+	$operator: null;
+
+	@each $item in $parts {
+		@if $item == "+" or $item == "-" or $item == "*" or $item == "/" {
+			$operator: $item;
+		} @else {
+			$current: if(var-value-is-ref($item), var-get-ref($item, value), $item);
+
+			@if $result == null {
+				$result: $current;
+			} @else {
+				@if $operator == "+" {
+					$result: $result + $current;
+				} @else if $operator == "-" {
+					$result: $result - $current;
+				} @else if $operator == "*" {
+					$result: $result * $current;
+				} @else if $operator == "/" {
+					$result: math.div($result, $current);
+				}
+			}
+		}
+	}
+
+	@return $result;
+}
+
+/* ===================================================== */
+/* 6️⃣ 最终出口 */
+/* 始终返回 var(--xxx, fallback) */
+/* ===================================================== */
+
+@function var-get($path...) {
+	$name: var-get-name($path...);
+	$fallback: var-get-value($path...);
+
+	// 如果未注册 CSS 变量 → 直接返回真实值
+	@if cfg.$var-css-registered == false {
+		@if $fallback == null {
+			@return null;
+		}
+		@return $fallback;
+	}
+
+	@if $fallback == null {
+		@return string.unquote("var(--#{$name})");
+	}
+
+	@return string.unquote("var(--#{$name}, #{$fallback})");
+}

package/function/index.scss

@@ -1,18 +1,16 @@
 @use "sass:string";
 
-@use "./namespace" as *;
+@use "./_namespace" as *;
+@use "./_variables" as *;
 
 @forward "./_namespace";
+@forward "./_variables";
 
 // 尺寸最小单位
 @function u($value) {
   @return calc(#{$value} * var(--size-unit));
 }
 
-@function css-var-name($category, $token) {
-  @return "--#{$category}-#{$token}";
-}
-
 @function get-image($image) {
 	// 已经是合法CSS值的情况
 	@if string.index($image, "url(") or

package/helper/expression.scss

@@ -0,0 +1,7 @@
+@function ref($path...) {
+  @return (ref: $path);
+}
+
+@function math($parts...) {
+  @return (calc: $parts);
+}

package/mixin/_atomic.scss

@@ -1,9 +1,13 @@
 
 // atomic
-@mixin generate-atomic($prefix, $property, $map) {
-	@each $key, $value in $map {
-		.#{$prefix}-#{$key} {
-			#{$property}: $value;
-		}
-	}
+@mixin generate-atomic($prefix, $map) {
+  @each $key, $declarations in $map {
+    $class-name: if($prefix ==null, $key, "#{$prefix}-#{$key}");
+
+    .#{$class-name} {
+      @each $prop, $val in $declarations {
+        #{$prop}: $val;
+      }
+    }
+  }
 }

package/mixin/_namespace.scss

@@ -40,6 +40,22 @@ $__bem-context: null;
 	}
 }
 
+@mixin when($state) {
+	$state-selector: cfg.$state-prefix + cfg.$common-separator + $state;
+
+	@at-root {
+		@if & {
+			&.#{$state-selector} {
+				@content;
+			}
+		} @else {
+			.#{$state-selector} {
+				@content;
+			}
+		}
+	}
+}
+
 @mixin t($names: null) {
 	@if $__bem-context != "block" {
 		@error "t() can only be used inside b()";
@@ -69,19 +85,3 @@ $__bem-context: null;
 		}
 	}
 }
-
-@mixin when($state) {
-	$state-selector: cfg.$state-prefix + cfg.$common-separator + $state;
-
-	@at-root {
-		@if & {
-			&.#{$state-selector} {
-				@content;
-			}
-		} @else {
-			.#{$state-selector} {
-				@content;
-			}
-		}
-	}
-}

package/mixin/_variables.scss

@@ -0,0 +1,71 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use "sass:list";
+
+@use '../variables/index' as vars;
+@use '../function/index' as fn;
+
+/* ===================================================== */
+/* 递归输出 CSS 变量 */
+/* ===================================================== */
+
+@mixin var-emit($name, $value) {
+	// map 递归
+	@if meta.type-of($value) == 'map' and not fn.var-value-is-ref($value) and not fn.var-value-is-calc($value) {
+		@each $k, $v in $value {
+			@include var-emit('#{$name}-#{$k}', $v);
+		}
+	} @else {
+		$final-value: null;
+
+		// ref
+		@if fn.var-value-is-ref($value) {
+			$final-value: fn.var-get-ref($value, css);
+		}
+
+		// calc
+		@else if fn.var-value-is-calc($value) {
+			$final-value: fn.var-get-calc($value, css);
+		}
+
+		// list
+		@else if meta.type-of($value) == 'list' {
+			$result: ();
+
+			@each $item in $value {
+				$resolved: $item;
+
+				@if fn.var-value-is-ref($item) {
+					$resolved: fn.var-get-ref($item, css);
+				} @else if fn.var-value-is-calc($item) {
+					$resolved: fn.var-get-calc($item, css);
+				}
+
+				$result: list.append($result, $resolved, space);
+			}
+
+			$final-value: $result;
+		}
+
+		// 普通值
+		@else {
+			$final-value: $value;
+		}
+
+		--#{$name}: #{$final-value};
+	}
+}
+
+@mixin var-register($names...) {
+	$all: meta.module-variables('vars');
+
+	@each $name in $names {
+		@if not map.has-key($all, $name) {
+			@error "Variable `#{$name}` not found in vars module.";
+		}
+
+		$value: map.get($all, $name);
+
+		@include var-emit($name, $value);
+	}
+}

package/mixin/index.scss

@@ -1,14 +1,18 @@
 @use "sass:map";
 
 @use "../_config"as cfg;
-@use "../_variables" as vars;
+@use "../variables/index" as vars;
 @use "../function/index" as fn;
 
 @use "./_atomic" as *;
 @use "./_namespace" as *;
+@use "./_variables" as *;
 
 @forward "../_config";
+
+@forward "./_atomic";
 @forward "./_namespace";
+@forward "./_variables";
 
 @mixin absolute-center($x: true, $y: true) {
 	$x-value: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nopon-web/styles",
-	"version": "0.1.00",
+	"version": "0.2.01",
 	"main": "index.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1"

package/theme.scss

@@ -1,115 +1,17 @@
-@use "sass:map";
-@use "./_config"as cfg;
-@use "./_variables" as vars;
 @use "./function/index" as fn;
+@use "./mixin/index" as mx;
 
-// ============================================
-// Color Tokens（颜色设计令牌）
-// 设计参考: https://tailwindcss.com/docs/colors
-// ============================================
-// 命名: $<name>-<scale>
-// scale: 50(浅) → 950(深)，500 为主色
-// 可映射为 CSS 变量支持主题切换
-// ============================================
+@mixin root-vars() {
+  font-size: calc(#{fn.var-get(size, root)} * 1px);
+  @include mx.var-register(size, text-base, text, color, z-index-base);
 
-// 主题色
-$theme-color-50: #ede6ff;
-$theme-color-500: #6e64c8;
-
-// 基础色(Background / Text Base）
-$color-base-50: #fff;
-$color-base-250: #f5f6f7;
-$color-base-500: #eee;
-$color-base-inverse-50: #777777;
-$color-base-inverse-250: #333333;
-$color-base-inverse-500: #000000;
-
-// 功能色（Semantic）
-$color-danger-500: #ff7b7b;
-
-@mixin color-vars {
-  --theme-color-50: #{$theme-color-50};
-  --theme-color-500: #{$theme-color-500};
-
-  // Base
-  --color-base-50: #{$color-base-50};
-  --color-base-250: #{$color-base-250};
-  --color-base-500: #{$color-base-500};
-  --color-base-inverse-50: #{$color-base-inverse-50};
-  --color-base-inverse-250: #{$color-base-inverse-250};
-  --color-base-inverse-500: #{$color-base-inverse-500};
-
-  // Semantic
-  --color-danger-500: #{$color-danger-500};
-
-  --color-text-500: var(--color-base-inverse-500);
-  --color-text-inverse-500: var(--color-base-50);
-  --color-icon-500: var(--color-base-inverse-500);
-  --color-border-500: var(--color-base-500);
-  --color-bg-500: var(--color-base-250);
-
-  // Dark Mode（结构反转
   &.dark {
-    --color-base-inverse-50: #{$color-base-50};
-    --color-base-inverse-250: #{$color-base-250};
-    --color-base-inverse-500: #{$color-base-500};
-
-    --color-base-50: #{$color-base-inverse-500};
-    --color-base-250: #{$color-base-inverse-250};
-    --color-base-500: #{$color-base-inverse-50};
-  }
-}
+    --color-base-50: #{fn.var-get-value(color, base, inverse, 500)};
+    --color-base-250: #{fn.var-get-value(color, base, inverse, 250)};
+    --color-base-500: #{fn.var-get-value(color, base, inverse, 50)};
 
-// ============================================
-// Scale Apply
-// --size-root : 设计基准（px）
-// --size-unit : 等效 1px 抽象单位
-// ============================================
-//
-// rem 模式:
-//   基于 root font-size（等价 Flexible）
-//
-// vw 模式:
-//   基于视口宽度比例
-//   需通过 JS 动态设置 --size-root = 当前视口宽度(px)
-//
-// ============================================
-@mixin size-apply() {
-  font-size: calc(var(--size-root) * 1px);
-  --size-root: #{vars.$size-root};
-
-  @if vars.$size-mode ==rem {
-    // Flexible
-    --size-unit: calc(1 / var(--size-root) * 1rem);
-  }
-
-  @else if vars.$size-mode ==vw {
-    // Viewport
-    --size-unit: calc(1 / var(--size-root) * 100vw);
-  }
-}
-
-// ============================================
-// Font Variables
-// text-* = base × ratio
-// ============================================
-@mixin text-vars() {
-  #{fn.css-var-name(cfg.$theme-font-prefix, base)}: calc(#{vars.$text-base} * var(--size-unit));
-
-  @each $step, $data in vars.$text-scale {
-    $ratio: map.get($data, ratio);
-    $token: map.get($data, token);
-
-    #{fn.css-var-name(cfg.$theme-font-prefix, $token)}: calc(var(--#{cfg.$theme-font-prefix}-base) * #{$ratio});
+    --color-base-inverse-50: #{fn.var-get-value(color, base, 50)};
+    --color-base-inverse-250: #{fn.var-get-value(color, base, 250)};
+    --color-base-inverse-500: #{fn.var-get-value(color, base, 500)};
   }
 }
-
-// 主题变量
-@mixin vars() {
-  @include size-apply();
-  @include text-vars();
-  @include color-vars();
-
-  // 层级控制
-  --z-index-base: #{vars.$z-index-base};
-}

package/variables/_button.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use '../helper/expression' as expr;
+
+$button: () !default;
+$button: map.deep-merge(
+	(
+		color: (
+			theme: (
+				50: expr.ref(color, theme, 50),
+				500: expr.ref(color, theme, 500),
+			),
+			text: (
+				base: expr.ref(color, text, 500),
+				hover: expr.ref(button, color, theme, 500),
+			),
+			bg: (
+				base: expr.ref(color, base, 250),
+				hover: expr.ref(button, color, theme, 50),
+			),
+		),
+		size: (
+			base: expr.math(30, '*', expr.ref(size, unit)),
+			text: expr.ref(text, sm),
+		),
+		border: (
+			width: expr.math(1, '*', expr.ref(size, unit)),
+			style: solid,
+			color: (
+				base: expr.ref(color, base, 250),
+				hover: expr.ref(button, color, theme, 500),
+			),
+		),
+		radius: (
+			base: expr.math(4, '*', expr.ref(size, unit)),
+			round: expr.math(20, '*', expr.ref(size, unit)),
+			circle: 100%,
+		),
+		padding: expr.math(12, '*', expr.ref(size, unit)) expr.math(14, '*', expr.ref(size, unit)),
+		gap: expr.math(10, '*', expr.ref(size, unit)),
+	),
+	$button
+);

package/variables/index.scss

@@ -0,0 +1,100 @@
+@use "sass:map";
+@use "../helper/expression" as expr;
+
+@forward "./button.scss";
+
+/* =======================================================
+  Size System
+  root    : 设计基准(px), 需通过 JS 动态设置 size-root = 当前视口宽度(px)
+  context : 根尺寸表达(1rem / 100vw)
+  unit    : 1px 折算单位
+  -------------------------------------------------------
+  rem 模式 : root = 16 → 1rem = 16px
+  vw  模式 : root = 设计稿宽度 → 100vw
+  -------------------------------------------------------
+  设计参考: https://tailwindcss.com/docs/font-size
+  参考标准: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#values
+======================================================= */
+
+$size: () !default;
+$size: map.deep-merge(
+	(
+		root: 16,
+		// 设计基准(px)
+		context: 1rem,
+		// 尺寸上下文(1rem / 100vw)
+		unit: expr.math(1, "/", expr.ref(size, root), "*", expr.ref(size, context)),
+	),
+	$size
+);
+
+/* ================= Typography ================= */
+$text-base: expr.math(16, "*", expr.ref(size, unit)) !default; // 基准字号(md)
+$text: () !default;
+$text: map.deep-merge(
+	(
+		6xs: expr.math(expr.ref(text-base), "*", 0.125),
+		5xs: expr.math(expr.ref(text-base), "*", 0.25),
+		4xs: expr.math(expr.ref(text-base), "*", 0.375),
+		3xs: expr.math(expr.ref(text-base), "*", 0.5),
+		2xs: expr.math(expr.ref(text-base), "*", 0.625),
+		xs: expr.math(expr.ref(text-base), "*", 0.75),
+		sm: expr.math(expr.ref(text-base), "*", 0.875),
+		md: expr.math(expr.ref(text-base), "*", 1),
+		lg: expr.math(expr.ref(text-base), "*", 1.125),
+		xl: expr.math(expr.ref(text-base), "*", 1.25),
+		2xl: expr.math(expr.ref(text-base), "*", 1.5),
+		3xl: expr.math(expr.ref(text-base), "*", 1.875),
+		4xl: expr.math(expr.ref(text-base), "*", 2.25),
+		5xl: expr.math(expr.ref(text-base), "*", 3),
+		6xl: expr.math(expr.ref(text-base), "*", 3.75),
+		7xl: expr.math(expr.ref(text-base), "*", 4.5),
+		8xl: expr.math(expr.ref(text-base), "*", 6),
+		9xl: expr.math(expr.ref(text-base), "*", 8),
+	),
+	$text
+);
+
+/* =======================================================
+  Color System
+  scale: 50(浅) → 950(深)，500 为主色
+  500   : 主色
+  支持 ref / 主题切换
+  -------------------------------------------------------
+  设计参考: https://tailwindcss.com/docs/colors
+======================================================= */
+$color: () !default;
+$color: map.deep-merge(
+	(
+		theme: (
+			50: #ede6ff,
+			500: #6e64c8,
+		),
+		base: (
+			50: #fff,
+			250: #f5f6f7,
+			500: #eee,
+			inverse: (
+				50: #777777,
+				250: #333333,
+				500: #000000,
+			),
+		),
+		danger: (
+			500: #ff7b7b,
+		),
+		text: (
+			500: expr.ref(color, base, inverse, 500),
+			inverse: (
+				500: expr.ref(color, base, 50),
+			),
+		),
+		icon: (
+			500: expr.ref(color, base, inverse, 50),
+		),
+	),
+	$color
+);
+
+/* ================= Layer ================= */
+$z-index-base: 1000;

package/_variables.scss

@@ -1,42 +0,0 @@
-// 尺寸模式(rem/vw)
-$size-mode: rem !default;
-
-// 尺寸基准（16 = 1rem 基准）
-$size-root: 16 !default;
-
-// 字号基准（md 等级）
-$text-base: 16 !default;
-
-// 字号比例阶梯（基于 md = 1）
-// lv < 0: small
-// lv = 0: medium
-// lv > 0: large
-//
-// 设计参考: https://tailwindcss.com/docs/font-size
-// 参考标准: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#values
-$text-scale: (
-  -7: (ratio: 0.125, token: 6xs),
-  -6: (ratio: 0.25, token: 5xs),
-  -5: (ratio: 0.375, token: 4xs),
-  -4: (ratio: 0.5, token: 3xs),
-  -3: (ratio: 0.625, token: 2xs),
-  -2: (ratio: 0.75, token: xs),
-  -1: (ratio: 0.875, token: sm),
-  0: (ratio: 1, token: md),
-  1: (ratio: 1.125, token: lg),
-  2: (ratio: 1.25, token: xl),
-  3: (ratio: 1.5, token: 2xl),
-  4: (ratio: 1.875, token: 3xl),
-  5: (ratio: 2.25, token: 4xl),
-  6: (ratio: 3, token: 5xl),
-  7: (ratio: 3.75, token: 6xl),
-  8: (ratio: 4.5, token: 7xl),
-  9: (ratio: 6, token: 8xl),
-  10: (ratio: 8, token: 9xl)
-);
-
-// 判断是否应用了主题包, 从而确定是否注册了 theme-vars
-$theme-applied: false !default;
-
-// 层级
-$z-index-base: 1000;