@nopon-web/styles 0.0.51 → 0.2.0

package/_config.scss

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

package/_variables.scss

@@ -1,9 +1,98 @@
-// 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
-$size-root: 16 !default;
-// 🔤 最小单位：等效于 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) !default;
+@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;

package/atomic/_flex.scss

@@ -0,0 +1,35 @@
+@use "../mixin/index" as mx;
+
+$flex: (
+	1: 1 1 0%,
+	auto: 1 1 auto,
+	initial: 0 1 auto,
+	none: none,
+);
+
+$flex-justify: (
+	normal: normal,
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	between: space-between,
+	around: space-around,
+	evenly: space-evenly,
+	stretch: stretch,
+);
+
+$flex-align: (
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	baseline: baseline,
+	stretch: stretch,
+);
+
+.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);

package/atomic/index.scss

@@ -0,0 +1 @@
+@use "./flex";

package/components/animation.scss

@@ -1,4 +1,5 @@
-@use "../mixin" as *;
+@use "../function/index" as fn;
+@use "../mixin/index" as mx;
 
 @keyframes like-floating {
 	from {
@@ -10,8 +11,8 @@
 	}
 }
 
-@include b(animation) {
-	&.#{join-class("like", "floating")} {
+@include mx.b(animation) {
+	&.#{fn.join-class("like", "floating")} {
 		animation-name: like-floating;
 		animation-duration: 1s;
 		animation-timing-function: ease-out;

package/components/dialog.scss

@@ -1,32 +1,33 @@
-@use "../mixin" as *;
+@use "../function/index" as fn;
+@use "../mixin/index" as mx;
 
-@include b(popup) {
-	&.#{bem(dialog)} {
+@include mx.b(popup) {
+	&.#{fn.bem(dialog)} {
 		--popup-padding: 0;
 		--popup-width: var(--dialog-width, 50%);
 	}
 }
 
-@include b(dialog) {
+@include mx.b(dialog) {
 	--dialog-width: 30%;
-	--dialog-padding-header: #{u(10)};
-	--dialog-padding-body: #{u(15)};
-	--dialog-padding-footer: #{u(10)};
+	--dialog-padding-header: #{fn.u(10)};
+	--dialog-padding-body: #{fn.u(15)};
+	--dialog-padding-footer: #{fn.u(10)};
 
-	@include e(header) {
+	@include mx.e(header) {
 		padding: var(--dialog-padding-header);
 
-		@include m(title) {
+		@include mx.m(title) {
 			font-size: var(--text-lg);
 		}
 	}
 
-	@include e(body) {
+	@include mx.e(body) {
 		padding: var(--dialog-padding-body);
 		overflow: hidden;
 	}
 
-	@include e(footer) {
+	@include mx.e(footer) {
 		padding: var(--dialog-padding-footer);
 	}
 }

package/components/frame-box.scss

@@ -1,4 +1,5 @@
-@use "../mixin" as *;
+@use "../function/index" as fn;
+@use "../mixin/index" as mx;
 
 /*!
 Example HTML:
@@ -17,42 +18,42 @@ Example HTML:
 </div>
 */
 
-@include b(join-class("frame", "box")) {
+@include mx.b(fn.join-class("frame", "box")) {
 	position: relative;
 	box-sizing: border-box;
 	font-size: 0;
 
-	@include e(bg) {
+	@include mx.e(bg) {
 		width: 100%;
 		height: 100%;
-		@include absolute-center(true, true);
+		@include mx.absolute-center(true, true);
 		z-index: 0;
 		pointer-events: none;
 	}
 
-	@include e(wrapper) {
+	@include mx.e(wrapper) {
 		position: relative;
 		z-index: 1;
 		margin: 0 auto;
 	}
 
-	@include e(frame) {
+	@include mx.e(frame) {
 		width: 100%;
 		height: 100%;
-		@include absolute-center(true, true);
+		@include mx.absolute-center(true, true);
 		z-index: 2;
 		pointer-events: none;
 	}
 
-	@include e(header) {
-		@include absolute-center(true, false);
+	@include mx.e(header) {
+		@include mx.absolute-center(true, false);
 		top: 0;
 		z-index: 3;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 
-		@include m(title) {
+		@include mx.m(title) {
 			white-space: nowrap;
 		}
 	}

package/components/grid.scss

@@ -1,23 +1,23 @@
-// 布局网格
-@use "../mixin" as *;
+@use "../function/index" as fn;
+@use "../mixin/index" as mx;
 
-@include b("grid") {
+@include mx.b("grid") {
 	--col: 4;
-	--gap: #{u(0)};
+	--gap: #{fn.u(0)};
 	--display: grid;
 	display: var(--display);
 
 	/* ========= grid 布局 ========= */
-	@include when("grid") {
+	@include mx.when("grid") {
 		--display: grid;
 		gap: var(--gap);
 
 		// 换行
-		@include when("wrap") {
+		@include mx.when("wrap") {
 			grid-template-columns: repeat(var(--col), minmax(0, 1fr));
 		}
 
-		&:not(#{when("wrap")}) {
+		&:not(#{fn.when("wrap")}) {
 			grid-auto-flow: column;
 			grid-auto-columns: calc((100% - (var(--col) - 1) * var(--gap)) / var(--col));
 			overflow-x: scroll;
@@ -25,14 +25,14 @@
 	}
 
 	/* ========= flex布局 ========= */
-	@include when("flex") {
+	@include mx.when("flex") {
 		--display: flex;
 		gap: var(--gap);
 
 		// 自动宽度
-		&:not(#{when("auto")}) {
+		&:not(#{fn.when("auto")}) {
 			> {
-				@include b("cell") {
+				@include mx.b("cell") {
 					flex-shrink: 0;
 					width: calc((100% - (var(--col) - 1) * var(--gap)) / var(--col));
 				}
@@ -40,19 +40,19 @@
 		}
 
 		// 换行
-		@include when("wrap") {
+		@include mx.when("wrap") {
 			flex-wrap: wrap;
 		}
 
-		&:not(#{when("wrap")}) {
+		&:not(#{fn.when("wrap")}) {
 			overflow-x: scroll;
 		}
 	}
 
 	/* ========= 单个 cell 居中 ========= */
-	@include when(join-class("only", "center")) {
+	@include mx.when(fn.join-class("only", "center")) {
 		> {
-			@include b("cell") {
+			@include mx.b("cell") {
 				&:only-child {
 					grid-column: 1 / calc(var(--col) + 1);
 					width: calc(100% / var(--col));

package/components/icon.scss

@@ -1,6 +1,6 @@
-@use "../mixin" as *;
+@use "../mixin/index" as mx;
 
-@include b("icon") {
+@include mx.b("icon") {
 	display: inline-block;
 	vertical-align: middle;
 	color: inherit;

package/components/image.scss

@@ -1,12 +1,12 @@
-@use "../mixin" as *;
+@use "../mixin/index" as mx;
 
-@include b("image") {
+@include mx.b("image") {
 	--aspect-ratio: 1;
 	position: relative;
 
 	// 背景
-	@include e("bg") {
-		@include absolute-center(true, true);
+	@include mx.e("bg") {
+		@include mx.absolute-center(true, true);
 		z-index: 0;
 		width: 100%;
 		height: 100%;
@@ -16,7 +16,7 @@
 	}
 
 	// 图片内容
-	@include e("content") {
+	@include mx.e("content") {
 		position: relative;
 		z-index: 1;
 		width: 100%;
@@ -25,23 +25,23 @@
 	}
 
 	// 遮罩
-	@include e("overlay") {
-		@include absolute-center(true, true);
+	@include mx.e("overlay") {
+		@include mx.absolute-center(true, true);
 		z-index: 3;
 		width: 100%;
 		height: 100%;
 	}
 
 	// 装饰
-	@include e("decoration") {
+	@include mx.e("decoration") {
 		position: absolute;
 		z-index: 2;
 		top: 0;
 		right: 0;
 	}
 
-	@include when("ratio") {
-		@include e("content") {
+	@include mx.when("ratio") {
+		@include mx.e("content") {
 			aspect-ratio: var(--aspect-ratio);
 			object-fit: cover;
 		}

package/components/popup.scss

@@ -1,12 +1,13 @@
-@use "../mixin" as *;
+@use "../function/index" as fn;
+@use "../mixin/index" as mx;
 
-@include b(popup) {
+@include mx.b(popup) {
 	--popup-width: 30%;
 	--popup-height: auto;
 	--popup-padding: calc(20 * var(--size-unit));
 	--popup-bg: linear-gradient(0deg, var(--color-base-50), var(--color-base-50));
 	--popup-z-index: 1;
-	--popup-close-inset: #{u(4)} #{u(4)} auto auto;
+	--popup-close-inset: #{fn.u(4)} #{fn.u(4)} auto auto;
 
 	position: fixed;
 	top: 0;
@@ -14,49 +15,49 @@
 	width: 100%;
 	height: 100%;
 	pointer-events: none;
-	@include set-z-index(var(--popup-z-index));
+	@include mx.set-z-index(var(--popup-z-index));
 
-	@include e(wrapper) {
-		@include bg(var(--popup-width), var(--popup-height), var(--popup-bg));
+	@include mx.e(wrapper) {
+		@include mx.bg(var(--popup-width), var(--popup-height), var(--popup-bg));
 		position: relative;
 		padding: var(--popup-padding);
 		pointer-events: auto;
 	}
 
-	@include e(close) {
+	@include mx.e(close) {
 		position: absolute;
 		inset: var(--popup-close-inset);
 		z-index: 1;
 	}
 
 	// 默认居中
-	&:not(#{when(ttb)}, #{when(rtl)}, #{when(btt)}, #{when(ltr)}) {
+	&:not(#{fn.when(ttb)}, #{fn.when(rtl)}, #{fn.when(btt)}, #{fn.when(ltr)}) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
-	@include when(ttb) {
+	@include mx.when(ttb) {
 		--popup-width: 100%;
 	}
 
-	@include when(rtl) {
+	@include mx.when(rtl) {
 		display: flex;
 		justify-content: flex-end;
 
-		@include e(wrapper) {
+		@include mx.e(wrapper) {
 			height: 100%;
 		}
 	}
 
-	@include when(btt) {
+	@include mx.when(btt) {
 		--popup-width: 100%;
 		display: flex;
 		align-items: flex-end;
 	}
 
-	@include when(ltr) {
-		@include e(wrapper) {
+	@include mx.when(ltr) {
+		@include mx.e(wrapper) {
 			height: 100%;
 		}
 	}

package/components/progress.scss

@@ -1,4 +1,5 @@
-@use "../mixin" as *;
+@use "../function/index" as fn;
+@use "../mixin/index" as mx;
 
 /*!
 Example HTML:
@@ -21,48 +22,48 @@ Example HTML:
 
 */
 
-@include b(progress) {
+@include mx.b(progress) {
 	--progress-width: 100%;
 	--progress-value: 0%; // 进度值
-	--progress-segment-point-width: #{u(30)}; // 节点大小
+	--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: #{u(20)}; // 进度条高度
-	--progress-bar-radius: #{u(10)}; // 进度条(内外)圆角
+	--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 e(wrapper) {
+	@include mx.e(wrapper) {
 		width: var(--progress-width);
 		position: relative;
 		min-height: var(--progress-segment-point-width);
 	}
 
 	// 片段
-	@include e(segments) {
+	@include mx.e(segments) {
 		display: flex;
 		justify-content: flex-start;
 	}
 
-	@include e(segment) {
+	@include mx.e(segment) {
 		position: relative;
 		z-index: 1;
 		width: var(--progress-segment-width, 0%);
 
-		@include m(wrapper) {
+		@include mx.m(wrapper) {
 			display: flex;
 			flex-direction: column;
 			align-items: flex-end;
 		}
 
-		@include m(point) {
+		@include mx.m(point) {
 			border-radius: 100%;
-			@include bg(
+			@include mx.bg(
 				var(--progress-segment-point-width),
 				var(--progress-segment-point-width),
 				var(--progress-segment-point-bg)
@@ -70,13 +71,13 @@ Example HTML:
 			transform: var(--progress-segment-point-transform);
 		}
 
-		@include m(content) {
+		@include mx.m(content) {
 			transform: var(--progress-segment-content-transform);
 		}
 
-		@include when("active") {
-			.#{bem("progress", "segment", "point")} {
-				@include bg(
+		@include mx.when("active") {
+			.#{fn.bem("progress", "segment", "point")} {
+				@include mx.bg(
 					var(--progress-segment-point-width),
 					var(--progress-segment-point-width),
 					var(--progress-segment-point-bg-active)
@@ -86,7 +87,7 @@ Example HTML:
 	}
 
 	// 进度条
-	@include e(bar) {
+	@include mx.e(bar) {
 		width: 100%;
 		position: absolute;
 		top: calc(var(--progress-segment-point-width) / 2);
@@ -94,21 +95,21 @@ Example HTML:
 		z-index: 0;
 		transform: translateY(-50%);
 
-		@include m(outer) {
+		@include mx.m(outer) {
 			width: 100%;
 			padding: var(--progress-bar-outer-padding);
 			border-radius: var(--progress-bar-radius);
-			@include bg(100%, var(--progress-bar-height), var(--progress-bar-outer-bg));
+			@include mx.bg(100%, var(--progress-bar-height), var(--progress-bar-outer-bg));
 		}
 
-		@include m(inner) {
+		@include mx.m(inner) {
 			height: 100%;
 			border-radius: var(--progress-bar-radius);
-			@include bg(var(--progress-value, 0%), 100%, var(--progress-bar-inner-bg));
+			@include mx.bg(var(--progress-value, 0%), 100%, var(--progress-bar-inner-bg));
 		}
 	}
 
-	@include when(rtl) {
+	@include mx.when(rtl) {
 		--progress-segment-point-transform: translateX(-50%);
 		--progress-segment-content-transform: translateX(-50%);
 	}

package/components/scroll-bar.scss

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

package/components/table.scss

@@ -1,5 +1,7 @@
+@use "../function/index" as fn;
+
 .table {
-	--grid-padding: #{u(2)} 0;
+	--grid-padding: #{fn.u(2)} 0;
 	--grid-width: auto;
 	--bg-thead: rgba(0, 0, 0, 0.2);
 	--color-border: #ffffff33;
@@ -7,7 +9,7 @@
 	font-size: 0;
 	border-spacing: 0;
 	border-collapse: separate;
-	border: #{u(2)} solid var(--color-border);
+	border: #{fn.u(2)} solid var(--color-border);
 	overflow: hidden;
 
 	thead {
@@ -31,7 +33,7 @@
 		flex: 1 0 var(--grid-width);
 		padding: var(--grid-padding);
 		border: solid var(--color-border);
-		border-width: 0 #{u(2)} #{u(2)} 0;
+		border-width: 0 #{fn.u(2)} #{fn.u(2)} 0;
 	}
 
 	.text {