@nopon-web/styles 0.1.0 → 0.2.0

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/_variables.scss

@@ -1,42 +1,98 @@
-// 尺寸模式(rem/vw)
-$size-mode: rem !default;
+@use 'sass:map';
 
-// 尺寸基准（16 = 1rem 基准）
-$size-root: 16 !default;
+@use "./helper/expression" as expr;
 
-// 字号基准（md 等级）
-$text-base: 16 !default;
-
-// 字号比例阶梯（基于 md = 1）
-// lv < 0: small
-// lv = 0: medium
-// lv > 0: large
-//
+// Size System
+// --size-root : 设计基准（px）
+// --size-unit : 等效 1px 抽象单位
 // 设计参考: 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)
+// ============================================
+//
+// rem 模式:
+//   基于 root font-size（等价 Flexible）
+//
+// vw 模式:
+//   基于视口宽度比例
+//   需通过 JS 动态设置 size-root = 当前视口宽度(px)
+//
+// ============================================
+$size: () !default;
+$size: map.deep-merge(
+  (
+    root: 16,  // 尺寸基准（16 = 1rem 基准）
+    mode: 1rem, // Flexible 模式: 1rem; Viewport 模式: 100vw;
+    unit: expr.math(1, "/", expr.ref(size, root), "*", expr.ref(size, mode))
+  ),
+  $size
+);
+
+$text-base: expr.math(16, "*", expr.ref(size, unit)) !default; // 字号基准（md 等级）
+$text: () !default; // 字号比例阶梯（基于 md = 1）
+$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
 );
 
-// 判断是否应用了主题包, 从而确定是否注册了 theme-vars
-$theme-applied: false !default;
+// ============================================
+// Color
+// 设计参考: https://tailwindcss.com/docs/colors
+// ============================================
+// 命名: $<name>-<scale>
+// scale: 50(浅) → 950(深)，500 为主色
+// 可映射为 CSS 变量支持主题切换
+// ============================================
+$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
+);
 
 // 层级
-$z-index-base: 1000;
+$z-index-base: 1000;

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

@@ -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,204 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "sass:math";
+@use "sass:string";
+
+@use "../_config"as cfg;
+@use "../variables" 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);
+		}
+	}
+
+	// 递归解析
+	@if var-value-is-ref($value) {
+		@return var-get-ref($value, cfg.$var-runtime-mode);
+	}
+
+	@if var-value-is-calc($value) {
+		@return var-get-calc($value, cfg.$var-runtime-mode);
+	}
+
+	@return $value;
+}
+
+/* ===================================================== */
+/* 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/_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,49 @@
+@use "sass:map";
+@use "sass:meta";
+
+@use "../variables" as vars;
+@use "../function/index" as fn;
+
+/* ===================================================== */
+/* 递归输出 CSS 变量 */
+/* ===================================================== */
+
+@mixin var-emit($name, $value) {
+	// 如果是普通嵌套 map（不是 ref / calc）
+	@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);
+		}
+
+		// 普通值
+		@else {
+			$final-value: $value;
+		}
+
+		--#{$name}: #{$final-value};
+	}
+}
+
+/* ===================================================== */
+/* 注册所有变量 */
+/* ===================================================== */
+
+@mixin var-register() {
+	$all: meta.module-variables("vars");
+
+	@each $name, $value in $all {
+		@include var-emit($name, $value);
+	}
+}

package/mixin/index.scss

@@ -6,9 +6,11 @@
 
 @use "./_atomic" as *;
 @use "./_namespace" as *;
+@use "./_variables" as *;
 
 @forward "../_config";
 @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.00",
 	"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 变量支持主题切换
-// ============================================
-
-// 主题色
-$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);
+@mixin vars() {
+  font-size: calc(#{fn.var-get(size, root)} * 1px);
+  @include mx.var-register();
 
-  // 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);
+    --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)};
   }
 }
-
-// ============================================
-// 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});
-  }
-}
-
-// 主题变量
-@mixin vars() {
-  @include size-apply();
-  @include text-vars();
-  @include color-vars();
-
-  // 层级控制
-  --z-index-base: #{vars.$z-index-base};
-}