@nopon-web/styles 0.0.51 → 0.1.0

package/function/_namespace.scss

@@ -0,0 +1,39 @@
+
+@use "../_config"as cfg;
+
+// bem("block", "element", "modifier") => "s_block__element--modifier"
+@function bem($block, $element: "", $modifier: "") {
+	$name: cfg.$namespace + cfg.$common-separator + $block;
+
+	@if $element != "" {
+		$name: $name + cfg.$element-separator + $element;
+	}
+
+	@if $modifier != "" {
+		$name: $name + cfg.$modifier-separator + $modifier;
+	}
+
+	@return $name;
+}
+
+@function when($state) {
+	$state-selector: cfg.$state-prefix + cfg.$common-separator + $state;
+
+	@return ".#{$state-selector}";
+}
+
+@function join-class($parts...) {
+	$result: "";
+
+	@each $part in $parts {
+		@if $part != null and $part != "" {
+			@if $result == "" {
+				$result: $part;
+			} @else {
+				$result: $result + cfg.$common-separator + $part;
+			}
+		}
+	}
+
+	@return $result;
+}

package/function/index.scss

@@ -0,0 +1,33 @@
+@use "sass:string";
+
+@use "./namespace" as *;
+
+@forward "./_namespace";
+
+// 尺寸最小单位
+@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
+		string.index($image, "gradient(") or
+		string.index($image, "var(") or
+		string.index($image, "data:")
+	{
+		@return $image;
+	}
+
+	// 空值或none
+	@if $image ==none or $image ==null {
+		@return none;
+	}
+
+	// 默认处理为路径
+	@return url($image);
+}

package/mixin/_atomic.scss

@@ -0,0 +1,9 @@
+
+// atomic
+@mixin generate-atomic($prefix, $property, $map) {
+	@each $key, $value in $map {
+		.#{$prefix}-#{$key} {
+			#{$property}: $value;
+		}
+	}
+}

package/mixin/_namespace.scss

@@ -0,0 +1,87 @@
+@use "../_config"as cfg;
+
+// BEM
+$B: null;
+$__bem-context: null;
+
+@mixin b($block) {
+	$B: cfg.$namespace + cfg.$common-separator + $block !global;
+
+	.#{$B} {
+		$__bem-context: "block" !global;
+		@content;
+		$__bem-context: null !global;
+	}
+}
+
+@mixin e($element) {
+	@if $__bem-context != "block" {
+		@error "e() can only be used inside b()";
+	}
+
+	@each $E in $element {
+		.#{$B + cfg.$element-separator + $E} {
+			$__bem-context: "element" !global;
+			@content;
+			$__bem-context: "block" !global;
+		}
+	}
+}
+
+@mixin m($modifier) {
+	@if $__bem-context != "block" and $__bem-context != "element" {
+		@error "m() can only be used inside b() or e()";
+	}
+
+	@each $M in $modifier {
+		&#{cfg.$modifier-separator + $M} {
+			@content;
+		}
+	}
+}
+
+@mixin t($names: null) {
+	@if $__bem-context != "block" {
+		@error "t() can only be used inside b()";
+	}
+
+	// 解析 themes 列表
+	$themes: ();
+	@if $names == null {
+		@if cfg.$theme-name == null or cfg.$theme-name == "" {
+			@error "$theme-name must be set globally or passed to @include t().";
+		}
+		$themes: (cfg.$theme-name);
+	} @else {
+		$themes: $names;
+	}
+
+	// 逐个生成 theme 选择器
+	@each $theme in $themes {
+		@if $theme == null or $theme == "" {
+			@error "Invalid theme name in @include t().";
+		}
+
+		$T: cfg.$theme-prefix + cfg.$common-separator + $theme;
+
+		&.#{$B + cfg.$modifier-separator + $T} {
+			@content;
+		}
+	}
+}
+
+@mixin when($state) {
+	$state-selector: cfg.$state-prefix + cfg.$common-separator + $state;
+
+	@at-root {
+		@if & {
+			&.#{$state-selector} {
+				@content;
+			}
+		} @else {
+			.#{$state-selector} {
+				@content;
+			}
+		}
+	}
+}

package/mixin/index.scss

@@ -0,0 +1,106 @@
+@use "sass:map";
+
+@use "../_config"as cfg;
+@use "../_variables" as vars;
+@use "../function/index" as fn;
+
+@use "./_atomic" as *;
+@use "./_namespace" as *;
+
+@forward "../_config";
+@forward "./_namespace";
+
+@mixin absolute-center($x: true, $y: true) {
+	$x-value: 0;
+	$y-value: 0;
+
+	position: absolute;
+
+	@if $x {
+		left: 50%;
+		$x-value: -50%;
+	}
+
+	@if $y {
+		top: 50%;
+		$y-value: -50%;
+	}
+
+	transform: translate(#{$x-value}, #{$y-value});
+}
+
+@mixin set-z-index($number) {
+	z-index: calc(var(--z-index-base, vars.$z-index-base) + $number);
+}
+
+// 背景
+@mixin bg($w, $h, $image) {
+	width: $w;
+	height: $h;
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-image: fn.get-image($image);
+}
+
+@mixin bg-text($image) {
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	-webkit-text-fill-color: transparent;
+	background-image: fn.get-image($image);
+}
+
+@mixin frame-border($frame) {
+	$image: map.get($frame, image);
+	$inset: map.get($frame, inset);
+	$slice: map.get($frame, slice);
+	$fill: map.get($frame, fill);
+	$repeat: map.get($frame, repeat, stretch);
+
+	@if not $image or not $inset or not $slice {
+		@error "frame-border: image / inset / slice are required";
+	}
+
+	@if $fill {
+		border-image-slice: #{$slice} fill;
+	} @else {
+		border-image-slice: #{$slice};
+	}
+
+	box-sizing: border-box;
+	border-style: solid;
+	border-width: $inset;
+	border-image-source: fn.get-image($image);
+	border-image-repeat: $repeat;
+}
+
+@mixin text-stroke($size, $color: #000, $blur: 0) {
+	text-shadow: #{$size} #{$size} #{$blur} #{$color}, -#{$size} #{$size} #{$blur} #{$color},
+		#{$size} -#{$size} #{$blur} #{$color}, -#{$size} -#{$size} #{$blur} #{$color};
+}
+
+@mixin text-shadow($size, $color: #000, $offset-x: fn.u(2), $offset-y: #{u(2)}) {
+	position: relative;
+	z-index: 0;
+	font-size: 0;
+	line-height: 1;
+	font-size: #{fn.u(10)};
+
+	> * {
+		font-size: $size;
+	}
+
+	&::before {
+		content: attr(data-text);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		z-index: -1;
+		color: $color;
+		font-size: $size;
+		white-space: nowrap;
+		// 偏移量
+		transform: translate(calc(-50% + #{$offset-x}), calc(-50% + #{$offset-y}));
+	}
+}

package/package.json

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

package/theme.scss

@@ -1,28 +1,22 @@
 @use "sass:map";
-@use "./_variables" as var;
+@use "./_config"as cfg;
+@use "./_variables" as vars;
+@use "./function/index" as fn;
 
-// -----------------------------
-// 🎨 颜色设计变量命名规范
-// -----------------------------
+// ============================================
+// Color Tokens（颜色设计令牌）
 // 设计参考: https://tailwindcss.com/docs/colors
-// 采用设计系统分级（Design Token）风格，使用结构化命名，方便主题维护与自动生成 CSS 变量。
-// 命名格式: $<color-name>-<scale>
-//
-// - color-name: 颜色语义标识或色调（如 primary、success、gray）
-// - scale: 数值越小表示颜色越浅（如 50 接近白色，900 接近黑色）
-//
-// 🌟 建议使用分级: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
-// - 500 为主色基准值（推荐 UI 主色）
-// - 其他等级用于 hover、disabled、背景、边框等场景
-//
-// 🔄 可统一生成 CSS Variables，用于 :root 或主题切换
-// e.g. $primary-500 → --primary-500
+// ============================================
+// 命名: $<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;
@@ -30,128 +24,92 @@ $color-base-inverse-50: #777777;
 $color-base-inverse-250: #333333;
 $color-base-inverse-500: #000000;
 
-// 警告色
+// 功能色（Semantic）
 $color-danger-500: #ff7b7b;
 
-// -----------------------------
-// 🔤 字体设计变量命名规范
-// -----------------------------
-// 设计参考: https://tailwindcss.com/docs/font-size
-// 参考标准: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#values
-// xx-small、x-small、small、medium、large、x-large、xx-large、xxx-large(基于用户默认字体大小（medium）的绝对大小关键字)
-
-$text-small-map: (
-	// 14px
-	0: 0.875,
-	// 12px
-	1: 0.75,
-	// 10px
-	2: 0.625,
-	// 8px
-	3: 0.5,
-	// 6px
-	4: 0.375,
-	// 4px
-	5: 0.25,
-	// 2px
-	6: 0.125
-);
-
-$text-large-map: (
-	// 18px
-	0: 1.125,
-	// 20px
-	1: 1.25,
-	// 24px
-	2: 1.5,
-	// 30px
-	3: 1.875,
-	4: 2.25,
-	5: 3,
-	6: 3.75,
-	7: 4.5,
-	8: 6,
-	9: 8
-);
-
-// 获取字体大小比例
-@function text-get-ratio($scale, $step) {
-	$ratio: 1; // 默认值
-
-	@if $scale == small and map.has-key($text-small-map, $step) {
-		$ratio: map.get($text-small-map, $step);
-	} @else if $scale == large and map.has-key($text-large-map, $step) {
-		$ratio: map.get($text-large-map, $step);
-	} @else {
-		@warn "text-get-ratio(): 无效的 scale 或 step，返回基础值";
-	}
-
-	@return $ratio;
+@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};
+  }
 }
 
-// 主题变量
-@mixin vars {
-	// 🌈 主题色
-	--theme-color-50: #{$theme-color-50};
-	--theme-color-500: #{$theme-color-500};
-
-	// 🎨 基础颜色
-	--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};
-	--color-danger-500: #{$color-danger-500};
-
-	// 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
-	--size-root: #{var.$size-root};
-
-	// 🔤 最小单位：等效于 1px：
-	// - 当使用 rem 方案：1px = calc(1 / var(--size-root) * 1rem)
-	// - 当使用 vw 方案：1px = calc(1 / var(--size-root) * 100vw)
-	--size-unit: calc(1 / var(--size-root) * 1rem);
-
-	// 🔠 字体尺寸（根据 --size-root 等比缩放）
-	--text-6xs: calc(var(--text-base) * #{text-get-ratio(small, 6)});
-	--text-5xs: calc(var(--text-base) * #{text-get-ratio(small, 5)});
-	--text-4xs: calc(var(--text-base) * #{text-get-ratio(small, 4)});
-	--text-3xs: calc(var(--text-base) * #{text-get-ratio(small, 3)});
-	--text-2xs: calc(var(--text-base) * #{text-get-ratio(small, 2)});
-	--text-xs: calc(var(--text-base) * #{text-get-ratio(small, 1)});
-	--text-sm: calc(var(--text-base) * #{text-get-ratio(small, 0)});
-	--text-base: calc(16 * var(--size-unit));
-	--text-lg: calc(var(--text-base) * #{text-get-ratio(large, 0)});
-	--text-xl: calc(var(--text-base) * #{text-get-ratio(large, 1)});
-	--text-2xl: calc(var(--text-base) * #{text-get-ratio(large, 2)});
-	--text-3xl: calc(var(--text-base) * #{text-get-ratio(large, 3)});
-	--text-4xl: calc(var(--text-base) * #{text-get-ratio(large, 4)});
-	--text-5xl: calc(var(--text-base) * #{text-get-ratio(large, 5)});
-	--text-6xl: calc(var(--text-base) * #{text-get-ratio(large, 6)});
-	--text-7xl: calc(var(--text-base) * #{text-get-ratio(large, 7)});
-	--text-8xl: calc(var(--text-base) * #{text-get-ratio(large, 8)});
-	--text-9xl: calc(var(--text-base) * #{text-get-ratio(large, 9)});
-
-	// 🧱 层级控制
-	--z-index-base: #{var.$z-index-base};
-
-	// 🎯 语义色扩展（从基础色继承）
-	--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 {
-		--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};
-	}
-
-	font-size: calc(var(--size-root) * 1px);
+// ============================================
+// 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});
+  }
+}
+
+// 主题变量
+@mixin vars() {
+  @include size-apply();
+  @include text-vars();
+  @include color-vars();
+
+  // 层级控制
+  --z-index-base: #{vars.$z-index-base};
+}

package/_function.scss

@@ -1,64 +0,0 @@
-@use "sass:string";
-@use "./_variables" as var;
-@use "_config" as config;
-
-// bem("block", "element", "modifier") => "s_block__element--modifier"
-@function bem($block, $element: "", $modifier: "") {
-	$name: config.$namespace + config.$common-separator + $block;
-
-	@if $element != "" {
-		$name: $name + config.$element-separator + $element;
-	}
-
-	@if $modifier != "" {
-		$name: $name + config.$modifier-separator + $modifier;
-	}
-
-	@return $name;
-}
-
-@function when($state) {
-	$state-selector: config.$state-prefix + config.$common-separator + $state;
-
-	@return ".#{$state-selector}";
-}
-
-@function join-class($parts...) {
-	$result: "";
-
-	@each $part in $parts {
-		@if $part != null and $part != "" {
-			@if $result == "" {
-				$result: $part;
-			} @else {
-				$result: $result + config.$common-separator + $part;
-			}
-		}
-	}
-
-	@return $result;
-}
-
-// 最小尺寸单位转换
-@function u($value) {
-  @return calc(#{$value} * var(--size-unit));
-}
-
-@function get-image($image) {
-	// 已经是合法CSS值的情况
-	@if string.index($image, "url(") or
-		string.index($image, "gradient(") or
-		string.index($image, "var(") or
-		string.index($image, "data:")
-	{
-		@return $image;
-	}
-
-	// 空值或none
-	@if $image ==none or $image ==null {
-		@return none;
-	}
-
-	// 默认处理为路径
-	@return url($image);
-}