@nopon-web/styles 0.0.51 → 0.1.0

package/_config.scss

@@ -3,5 +3,7 @@ $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;

package/_variables.scss

@@ -1,9 +1,42 @@
-// 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
+// 尺寸模式(rem/vw)
+$size-mode: rem !default;
+
+// 尺寸基准（16 = 1rem 基准）
 $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;
+
+// 字号基准（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;
+$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-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)); // 内背景
 	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/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 {

package/components/text.scss

@@ -1,43 +1,33 @@
-@use "../mixin" as *;
-
-@include b("text") {
-	display: inline-block;
-	line-height: 1;
-	vertical-align: middle;
-
-	@include when("ellipsis") {
-		width: 100%;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-	}
-
-	@include when("h1") {
-		font-size: var(--text-3xl);
-	}
-
-	@include when("h2") {
-		font-size: var(--text-2xl);
-	}
-
-	@include when("h3") {
-		font-size: var(--text-xl);
-	}
-
-	@include when("h4") {
-		font-size: var(--text-lg);
-	}
-
-	@include when("h5") {
-		font-size: var(--text-base);
-	}
-
-	@include when("h6") {
-		font-size: var(--text-sm);
-	}
-
-	@include when("p") {
-		display: block;
-		line-height: 1.5;
-	}
-}
+@use "sass:map";
+@use "../_config"as cfg;
+@use "../_variables" as vars;
+@use "../function/index" as fn;
+@use "../mixin/index" as mx;
+
+@include mx.b("text") {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+
+  @include mx.when("ellipsis") {
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  @each $step, $data in vars.$text-scale {
+    $ratio: map.get($data, ratio);
+    $token: map.get($data, token);
+    
+    // 生成字体尺寸
+    @include mx.m($token) {
+      font-size: var(#{fn.css-var-name(cfg.$theme-font-prefix, $token)});
+    }
+  }
+
+  @include mx.when("p") {
+    display: block;
+    line-height: 1.5;
+  }
+}