@nopon-web/styles 0.2.0 → 0.2.1

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/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;
 

package/function/_variables.scss

@@ -4,8 +4,8 @@
 @use "sass:math";
 @use "sass:string";
 
-@use "../_config"as cfg;
-@use "../variables" as vars;
+@use "../_config" as cfg;
+@use "../variables/index" as vars;
 
 /* ===================================================== */
 /* 1️⃣ 类型判断 */
@@ -65,16 +65,38 @@
 		}
 	}
 
-	// 递归解析
+	$result: $value;
+
+	// ref
 	@if var-value-is-ref($value) {
-		@return var-get-ref($value, cfg.$var-runtime-mode);
+		$result: var-get-ref($value, cfg.$var-runtime-mode);
 	}
 
-	@if var-value-is-calc($value) {
-		@return var-get-calc($value, cfg.$var-runtime-mode);
+	// calc
+	@else if var-value-is-calc($value) {
+		$result: var-get-calc($value, cfg.$var-runtime-mode);
 	}
 
-	@return $value;
+	// 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;
 }
 
 /* ===================================================== */
@@ -82,38 +104,38 @@
 /* ===================================================== */
 
 @function var-get-ref($ref-value, $mode: value) {
-  $path: map.get($ref-value, ref);
+	$path: map.get($ref-value, ref);
 
-  // 先拿真实值（永远可用）
-  $fallback: var-get-value($path...);
+	// 先拿真实值（永远可用）
+	$fallback: var-get-value($path...);
 
-  @if $fallback == null {
-    @error "Ref path not found: #{$path}";
-  }
+	@if $fallback == null {
+		@error "Ref path not found: #{$path}";
+	}
 
-  /* =========================
+	/* =========================
     未注册 CSS 变量
     强制返回真实值
   ========================= */
 
-  @if cfg.$var-css-registered == false {
-    @return $fallback;
-  }
+	@if cfg.$var-css-registered == false {
+		@return $fallback;
+	}
 
-  /* =========================
+	/* =========================
     CSS 模式
   ========================= */
 
-  @if $mode == css {
-    $name: var-get-name($path...);
-    @return string.unquote("var(--#{$name}, #{$fallback})");
-  }
+	@if $mode == css {
+		$name: var-get-name($path...);
+		@return string.unquote("var(--#{$name}, #{$fallback})");
+	}
 
-  /* =========================
+	/* =========================
     value 模式
   ========================= */
 
-  @return $fallback;
+	@return $fallback;
 }
 
 /* ===================================================== */
@@ -187,14 +209,14 @@
 @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;
-  }
+
+	// 如果未注册 CSS 变量 → 直接返回真实值
+	@if cfg.$var-css-registered == false {
+		@if $fallback == null {
+			@return null;
+		}
+		@return $fallback;
+	}
 
 	@if $fallback == null {
 		@return string.unquote("var(--#{$name})");

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

@@ -1,18 +1,19 @@
-@use "sass:map";
-@use "sass:meta";
+@use 'sass:map';
+@use 'sass:meta';
+@use "sass:list";
 
-@use "../variables" as vars;
-@use "../function/index" as fn;
+@use '../variables/index' 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) {
+	// 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);
+			@include var-emit('#{$name}-#{$k}', $v);
 		}
 	} @else {
 		$final-value: null;
@@ -27,6 +28,25 @@
 			$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;
@@ -36,14 +56,16 @@
 	}
 }
 
-/* ===================================================== */
-/* 注册所有变量 */
-/* ===================================================== */
+@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.";
+		}
 
-@mixin var-register() {
-	$all: meta.module-variables("vars");
+		$value: map.get($all, $name);
 
-	@each $name, $value in $all {
 		@include var-emit($name, $value);
 	}
 }

package/mixin/index.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 
 @use "../_config"as cfg;
-@use "../_variables" as vars;
+@use "../variables/index" as vars;
 @use "../function/index" as fn;
 
 @use "./_atomic" as *;
@@ -9,6 +9,8 @@
 @use "./_variables" as *;
 
 @forward "../_config";
+
+@forward "./_atomic";
 @forward "./_namespace";
 @forward "./_variables";
 

package/package.json

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

package/theme.scss

@@ -1,9 +1,9 @@
 @use "./function/index" as fn;
 @use "./mixin/index" as mx;
 
-@mixin vars() {
+@mixin root-vars() {
   font-size: calc(#{fn.var-get(size, root)} * 1px);
-  @include mx.var-register();
+  @include mx.var-register(size, text-base, text, color, z-index-base);
 
   &.dark {
     --color-base-50: #{fn.var-get-value(color, base, inverse, 500)};

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,98 +0,0 @@
-@use 'sass:map';
-
-@use "./helper/expression" as expr;
-
-// 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
-// ============================================
-//
-// 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
-);
-
-// ============================================
-// 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;