@nopon-web/styles 0.0.3 → 0.0.5

package/_config.scss

@@ -1,5 +1,7 @@
-$namespace: 's' !default;
-$state-prefix: 'is' !default;
-$common-separator: '-' !default;
-$element-separator: '__' !default;
-$modifier-separator: '--' !default;
+$namespace: "s" !default;
+$common-separator: "-" !default;
+$element-separator: "__" !default;
+$modifier-separator: "--" !default;
+$state-prefix: "is" !default;
+$theme-prefix: "theme" !default;
+$theme-name: "" !default;

package/_function.scss

@@ -1,28 +1,55 @@
-@use 'sass:string';
-@use './_variables' as var;
-@use '_config' as config;
+@use "sass:string";
+@use "./_variables" as var;
+@use "_config" as config;
 
-// bem('block', 'element', 'modifier') => 's_block__element--modifier'
-@function bem($block, $element: '', $modifier: '') {
+// bem("block", "element", "modifier") => "s_block__element--modifier"
+@function bem($block, $element: "", $modifier: "") {
 	$name: config.$namespace + config.$common-separator + $block;
 
-	@if $element != '' {
+	@if $element != "" {
 		$name: $name + config.$element-separator + $element;
 	}
 
-	@if $modifier != '' {
+	@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:')
+	@if string.index($image, "url(") or
+		string.index($image, "gradient(") or
+		string.index($image, "var(") or
+		string.index($image, "data:")
 	{
 		@return $image;
 	}

package/_mixin.scss

@@ -1,43 +1,44 @@
-@use 'sass:map';
+@use "sass:map";
 
-@use '_config' as *;
-@use '_variables' as var;
-@use '_function' as func;
+@use "_config" as *;
+@use "_variables" as var;
+@use "_function" as func;
 
-@forward '_config';
-@forward '_variables';
-@forward '_function';
+@forward "_config";
+@forward "_variables";
+@forward "_function";
 
 // BEM
+$B: null;
 $__bem-context: null;
 
 @mixin b($block) {
-	$B: $namespace + $common-separator + $block;
+	$B: $namespace + $common-separator + $block !global;
 
 	.#{$B} {
-		$__bem-context: 'block' !global;
+		$__bem-context: "block" !global;
 		@content;
 		$__bem-context: null !global;
 	}
 }
 
 @mixin e($element) {
-	@if $__bem-context != 'block' {
-		@error 'e() can only be used inside b()';
+	@if $__bem-context != "block" {
+		@error "e() can only be used inside b()";
 	}
 
 	@each $E in $element {
-		&#{$element-separator + $E} {
-			$__bem-context: 'element' !global;
+		.#{$B + $element-separator + $E} {
+			$__bem-context: "element" !global;
 			@content;
-			$__bem-context: 'block' !global;
+			$__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()';
+	@if $__bem-context != "block" and $__bem-context != "element" {
+		@error "m() can only be used inside b() or e()";
 	}
 
 	@each $M in $modifier {
@@ -47,11 +48,41 @@ $__bem-context: null;
 	}
 }
 
+@mixin t($names: null) {
+	@if $__bem-context != "block" {
+		@error "t() can only be used inside b()";
+	}
+
+	// 解析 themes 列表
+	$themes: ();
+	@if $names == null {
+		@if $theme-name == null or $theme-name == "" {
+			@error "$theme-name must be set globally or passed to @include t().";
+		}
+		$themes: ($theme-name);
+	} @else {
+		$themes: $names;
+	}
+
+	// 逐个生成 theme 选择器
+	@each $theme in $themes {
+		@if $theme == null or $theme == "" {
+			@error "Invalid theme name in @include t().";
+		}
+
+		$T: $theme-prefix + $common-separator + $theme;
+
+		&.#{$B + $modifier-separator + $T} {
+			@content;
+		}
+	}
+}
+
 @mixin when($state) {
 	$state-selector: $state-prefix + $common-separator + $state;
 
 	@at-root {
-		#{if(&, '&.#{$state-selector}', '.#{$state-selector}')} {
+		#{if(&, "&.#{$state-selector}", ".#{$state-selector}")} {
 			@content;
 		}
 	}
@@ -68,7 +99,7 @@ $__bem-context: null;
 		left: 50%;
 	}
 
-	transform: translate(#{if($x, '-50%', '0')}, #{if($y, '-50%', '0')});
+	transform: translate(#{if($x, "-50%", "0")}, #{if($y, "-50%", "0")});
 }
 
 @mixin set-z-index($number) {
@@ -85,19 +116,6 @@ $__bem-context: null;
 	background-image: func.get-image($image);
 }
 
-@mixin bg-border($width, $height, $image, $border: ('width': 0, 'image-slice': 0), $fill: true) {
-	$border-width: map.get($border, 'width');
-	$border-image-slice: map.get($border, 'image-slice');
-
-	width: $width;
-	height: $height;
-	border-image-source: func.get-image($image);
-	border-style: solid;
-	box-sizing: border-box;
-	border-width: $border-width;
-	border-image-slice: #{$border-image-slice}#{if($fill, ' fill', '')};
-}
-
 @mixin bg-text($image) {
 	background-clip: text;
 	-webkit-background-clip: text;
@@ -106,16 +124,39 @@ $__bem-context: null;
 	background-image: func.get-image($image);
 }
 
-@mixin text-stroke($size: 1px, $color: #000, $blur: 0) {
-	text-shadow: #{$size} #{$size} #{$blur} #{$color}, -#{$size} #{$size} #{$blur} #{$color},
-		#{$size} -#{$size} #{$blur} #{$color}, -#{$size} -#{$size} #{$blur} #{$color};
+@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";
+	}
+
+	box-sizing: border-box;
+	border-style: solid;
+	border-width: $inset;
+	border-image-source: func.get-image($image);
+	border-image-slice: #{$slice}#{if($fill, " fill", "")};
+	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: 14px, $color: #000, $offset-x: 2px, $offset-y: 2px) {
+@mixin text-shadow($size, $color: #000, $offset-x: func.u(2), $offset-y: #{u(2)}) {
 	position: relative;
 	z-index: 0;
 	font-size: 0;
 	line-height: 1;
+  font-size: #{func.u(10)};
 
 	> * {
 		font-size: $size;
@@ -134,169 +175,3 @@ $__bem-context: null;
 		transform: translate(calc(-50% + #{$offset-x}), calc(-50% + #{$offset-y}));
 	}
 }
-
-/// 通用列表布局封装
-/// 支持 grid / flex 两种布局
-/// @param $options - 可选配置
-/// ------------------------------------------------------------------------
-/// HTML 模板示例：
-// <ul class="b-e--list">
-//   <li class="b-e--item">
-//     <div class="b-e--media">
-//       <div class="b-e--picture">
-//         <div class="b-e--picture_bg picture">
-//           <img src="">
-//         </div>
-//         <div class="b-e--picture_wrapper picture">
-//           <img class="b-e--picture_content"
-//             src="">
-//         </div>
-//         <div class="b-e--picture_decoration picture">
-//           <img src="">
-//         </div>
-//         <div class="b-e--picture_cover picture">
-//           <img src="">
-//         </div>
-//       </div>
-//     </div>
-//     <div class="b-e--content">
-//       <div class="b-e--content_text">
-//         <span class="text"></span>
-//       </div>
-//     </div>
-//   </li>
-// </ul>
-/// ------------------------------------------------------------------------
-@mixin extend-list($options: ()) {
-	// --- 默认参数 ---
-	$defaults: (
-		'namespace-block': 'b',
-		'namespace-element': 'e',
-		// 布局模式
-		'display': grid,
-		// 是否换行
-		'wrap': false,
-		// 列数
-		'col': 4,
-		// 间距
-		'gap': 10px,
-		// 图片宽高比
-		'picture-ratio': 100%,
-		// 图片宽度
-		'picture-width': 100%,
-		// 图片高度
-		'picture-height': 100%,
-	);
-
-	// 合并配置
-	$config: map.merge($defaults, $options);
-
-	// 变量定义
-	$block: map.get($config, 'namespace-block');
-	$element: map.get($config, 'namespace-element');
-	$display: map.get($config, 'display');
-	$wrap: map.get($config, 'wrap');
-	$col: map.get($config, 'col');
-	$gap: map.get($config, 'gap');
-	$picture-ratio: map.get($config, 'picture-ratio');
-	$picture-width: map.get($config, 'picture-width');
-	$picture-height: map.get($config, 'picture-height');
-
-	// --- 列表容器 ---
-	.#{$block}-#{$element}--list {
-		--col: #{$col};
-		--gap: #{$gap};
-		--picture-ratio: #{$picture-ratio};
-		--picture-width: #{$picture-width};
-		--picture-height: #{$picture-height};
-		display: $display;
-
-		// flex 布局
-		@if $display ==flex {
-			margin: 0 calc(var(--gap) / -2);
-
-			// 换行
-			@if $wrap {
-				flex-wrap: wrap;
-			}
-		}
-
-		// grid 布局(默认)
-		@if $display ==grid {
-			gap: var(--gap);
-
-			// 换行
-			@if $wrap {
-				grid-template-columns: repeat(var(--col), minmax(0, 1fr));
-			} @else {
-				grid-auto-flow: column;
-				grid-auto-columns: calc((100% - (var(--col) - 1) * var(--gap)) / var(--col));
-			}
-		}
-
-		@if $wrap ==false {
-			overflow-x: scroll;
-		}
-
-		.#{$block}-#{$element}--item:only-child {
-			grid-column: 1 / calc(var(--col) + 1);
-			width: calc(100% / var(--col));
-			margin: 0 auto;
-		}
-	}
-
-	// --- 列表项 ---
-	.#{$block}-#{$element}--item {
-		position: relative;
-		font-size: 0;
-
-		@if $display ==flex {
-			flex-shrink: 0;
-			width: calc(100% / var(--col));
-			padding: calc(var(--gap) / 2);
-		}
-	}
-
-	// --- 图片 ---
-	.#{$block}-#{$element}--picture {
-		position: relative;
-
-		&_bg {
-			width: 100%;
-			height: 100%;
-			@include absolute-center(true, true);
-			z-index: 0;
-		}
-
-		&_wrapper {
-			position: relative;
-			height: 0;
-			padding-bottom: var(--picture-ratio);
-		}
-
-		&_content {
-			max-width: var(--picture-width);
-			max-height: var(--picture-height);
-			@include absolute-center(true, true);
-		}
-
-		&_decoration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			z-index: 1;
-		}
-
-		&_cover {
-			@include absolute-center(true, true);
-			z-index: 2;
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	// --- 内容区 ---
-	.#{$block}-#{$element}--content {
-		text-align: center;
-	}
-}

package/_variables.scss

@@ -1,2 +1,9 @@
+// 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
+$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;
+
 // 层级
 $z-index-base: 1000;

package/{animation.scss → components/animation.scss}

@@ -1,3 +1,5 @@
+@use "../mixin" as *;
+
 @keyframes like-floating {
 	from {
 		transform: translateY(0) scale(0.5);
@@ -8,8 +10,8 @@
 	}
 }
 
-.animation {
-	&-like_floating {
+@include b(animation) {
+	&.#{join-class("like", "floating")} {
 		animation-name: like-floating;
 		animation-duration: 1s;
 		animation-timing-function: ease-out;

package/components/dialog.scss

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

package/components/frame-box.scss

@@ -0,0 +1,59 @@
+@use "../mixin" as *;
+
+/*!
+Example HTML:
+
+<div class="frame-box">
+  <div class="frame-box__bg"></div>
+  <div class="frame-box__wrapper">
+    <div class="frame-box__body">
+      Content
+    </div>
+  </div>
+  <div class="frame-box__frame"></div>
+  <div class="frame-box__header">
+    <span class="frame-box__header--title">Title</span>
+  </div>
+</div>
+*/
+
+@include b(join-class("frame", "box")) {
+	position: relative;
+	box-sizing: border-box;
+	font-size: 0;
+
+	@include e(bg) {
+		width: 100%;
+		height: 100%;
+		@include absolute-center(true, true);
+		z-index: 0;
+		pointer-events: none;
+	}
+
+	@include e(wrapper) {
+		position: relative;
+		z-index: 1;
+		margin: 0 auto;
+	}
+
+	@include e(frame) {
+		width: 100%;
+		height: 100%;
+		@include absolute-center(true, true);
+		z-index: 2;
+		pointer-events: none;
+	}
+
+	@include e(header) {
+		@include absolute-center(true, false);
+		top: 0;
+		z-index: 3;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		@include m(title) {
+			white-space: nowrap;
+		}
+	}
+}

package/components/grid.scss

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

package/components/icon.scss

@@ -1,9 +1,7 @@
-// 图标
-.icon {
-  display: inline-block;
-  vertical-align: middle;
+@use "../mixin" as *;
 
-  &.picture {
-    font-size: 0;
-  }
-}
+@include b("icon") {
+	display: inline-block;
+	vertical-align: middle;
+	color: inherit;
+}

package/components/image.scss

@@ -1,18 +1,48 @@
-@use '../mixin' as *;
+@use "../mixin" as *;
 
-@include b('image') {
+@include b("image") {
 	--aspect-ratio: 1;
+	position: relative;
 
-	> img {
+	// 背景
+	@include e("bg") {
+		@include absolute-center(true, true);
+		z-index: 0;
 		width: 100%;
 		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
-	@include when('ratio') {
+	// 图片内容
+	@include e("content") {
 		position: relative;
-		aspect-ratio: var(--aspect-ratio);
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+
+	// 遮罩
+	@include e("overlay") {
+		@include absolute-center(true, true);
+		z-index: 3;
+		width: 100%;
+		height: 100%;
+	}
+
+	// 装饰
+	@include e("decoration") {
+		position: absolute;
+		z-index: 2;
+		top: 0;
+		right: 0;
+	}
 
-		> img {
+	@include when("ratio") {
+		@include e("content") {
+			aspect-ratio: var(--aspect-ratio);
 			object-fit: cover;
 		}
 	}

package/components/index.scss

@@ -0,0 +1,11 @@
+@use "./animation.scss";
+@use "./dialog.scss";
+@use "./frame-box.scss";
+@use "./grid.scss";
+@use "./icon.scss";
+@use "./image.scss";
+@use "./popup.scss";
+@use "./progress.scss";
+@use "./scroll-bar.scss";
+@use "./table.scss";
+@use "./text.scss";

package/components/popup.scss

@@ -1,48 +1,63 @@
-.popup {
-	overflow: hidden;
-
-	&.no-scroll {
-		.popup-wrapper {
-			display: flex;
-			flex-direction: column;
-		}
+@use "../mixin" as *;
+
+@include 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;
+
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	@include set-z-index(var(--popup-z-index));
+
+	@include e(wrapper) {
+		@include bg(var(--popup-width), var(--popup-height), var(--popup-bg));
+		position: relative;
+		padding: var(--popup-padding);
+		pointer-events: auto;
+	}
 
-		.popup-body {
-			flex: 1;
-		}
+	@include e(close) {
+		position: absolute;
+		inset: var(--popup-close-inset);
+		z-index: 1;
 	}
-}
 
-.popup-wrapper {
-	height: 100%;
-}
+	// 默认居中
+	&:not(#{when(ttb)}, #{when(rtl)}, #{when(btt)}, #{when(ltr)}) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-.popup-header--title {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
+	@include when(ttb) {
+		--popup-width: 100%;
+	}
 
-.popup-body {
-	position: relative;
-	overflow-y: scroll;
-}
+	@include when(rtl) {
+		display: flex;
+		justify-content: flex-end;
 
-.popup-footer {
-	text-align: center;
-}
+		@include e(wrapper) {
+			height: 100%;
+		}
+	}
 
-.popup-footer--button_list {
-	display: flex;
-	justify-content: space-around;
-	margin: 0 auto;
-}
+	@include when(btt) {
+		--popup-width: 100%;
+		display: flex;
+		align-items: flex-end;
+	}
 
-// 自定义
-.footer-custom {
-	position: sticky;
-	left: 0;
-	bottom: 0;
-	width: 100%;
+	@include when(ltr) {
+		@include e(wrapper) {
+			height: 100%;
+		}
+	}
 }

package/components/progress.scss

@@ -0,0 +1,115 @@
+@use "../mixin" as *;
+
+/*!
+Example HTML:
+
+<div class="s-progress">
+	<div class="s-progress__wrapper">
+		<div class="s-progress__segments">
+			<div class="s-progress__segment is-active" style="--progress-segment-width: calc(100% - 0%)">
+				<div class="s-progress__segment--wrapper">
+					<div class="s-progress__segment--point"></div>
+					<div class="s-progress__segment--content"><span class="s-text">100%</span></div>
+				</div>
+			</div>
+		</div>
+		<div class="s-progress__bar">
+			<div class="s-progress__bar--outer"><div class="s-progress__bar--inner"></div></div>
+		</div>
+	</div>
+</div>
+
+*/
+
+@include b(progress) {
+	--progress-width: 100%;
+	--progress-value: 0%; // 进度值
+	--progress-segment-point-width: #{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-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) {
+		width: var(--progress-width);
+		position: relative;
+		min-height: var(--progress-segment-point-width);
+	}
+
+	// 片段
+	@include e(segments) {
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	@include e(segment) {
+		position: relative;
+		z-index: 1;
+		width: var(--progress-segment-width, 0%);
+
+		@include m(wrapper) {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+		}
+
+		@include m(point) {
+			border-radius: 100%;
+			@include bg(
+				var(--progress-segment-point-width),
+				var(--progress-segment-point-width),
+				var(--progress-segment-point-bg)
+			);
+			transform: var(--progress-segment-point-transform);
+		}
+
+		@include m(content) {
+			transform: var(--progress-segment-content-transform);
+		}
+
+		@include when("active") {
+			.#{bem("progress", "segment", "point")} {
+				@include bg(
+					var(--progress-segment-point-width),
+					var(--progress-segment-point-width),
+					var(--progress-segment-point-bg-active)
+				);
+			}
+		}
+	}
+
+	// 进度条
+	@include e(bar) {
+		width: 100%;
+		position: absolute;
+		top: calc(var(--progress-segment-point-width) / 2);
+		left: 0;
+		z-index: 0;
+		transform: translateY(-50%);
+
+		@include 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 m(inner) {
+			height: 100%;
+			border-radius: var(--progress-bar-radius);
+			@include bg(var(--progress-value, 0%), 100%, var(--progress-bar-inner-bg));
+		}
+	}
+
+	@include when(rtl) {
+		--progress-segment-point-transform: translateX(-50%);
+		--progress-segment-content-transform: translateX(-50%);
+	}
+}

package/components/table.scss

@@ -1,30 +1,23 @@
 .table {
-	--grid-padding: 0.2rem 0;
+	--grid-padding: #{u(2)} 0;
 	--grid-width: auto;
 	--bg-thead: rgba(0, 0, 0, 0.2);
-	--color-border: rgba(255, 255, 255, 0.2);
+	--color-border: #ffffff33;
 	width: 100%;
 	font-size: 0;
 	border-spacing: 0;
 	border-collapse: separate;
-	border: 0.02rem solid var(--color-border);
+	border: #{u(2)} solid var(--color-border);
 	overflow: hidden;
 
 	thead {
 		background-color: var(--bg-thead);
 
 		.text {
-			font-size: 0.3rem;
 			font-weight: bold;
 		}
 	}
 
-	tbody {
-		.text {
-			font-size: 0.28rem;
-		}
-	}
-
 	tr {
 		width: 100%;
 		display: flex;
@@ -38,7 +31,7 @@
 		flex: 1 0 var(--grid-width);
 		padding: var(--grid-padding);
 		border: solid var(--color-border);
-		border-width: 0 0.02rem 0.02rem 0;
+		border-width: 0 #{u(2)} #{u(2)} 0;
 	}
 
 	.text {

package/components/text.scss

@@ -1,15 +1,43 @@
-.text {
+@use "../mixin" as *;
+
+@include b("text") {
 	display: inline-block;
 	line-height: 1;
 	vertical-align: middle;
 
-	&.paragraph {
-		line-height: 1.5;
-	}
-
-	&.ellipsis {
+	@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;
+	}
 }

package/index.scss

@@ -1,2 +1,2 @@
-@use './normalize.css';
-@use './base.scss';
+@use "./normalize.css";
+@use "./base.scss";

package/package.json

@@ -1,15 +1,15 @@
-{
-	"name": "@nopon-web/styles",
-	"version": "0.0.3",
-	"main": "index.js",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"keywords": [],
-	"author": "",
-	"license": "ISC",
-	"description": "",
-	"publishConfig": {
-		"access": "public"
-	}
-}
+{
+	"name": "@nopon-web/styles",
+	"version": "0.0.5",
+	"main": "index.js",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"description": "",
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/theme.scss

@@ -1,5 +1,5 @@
-@use 'sass:map';
-@use './_variables' as var;
+@use "sass:map";
+@use "./_variables" as var;
 
 // -----------------------------
 // 🎨 颜色设计变量命名规范
@@ -40,8 +40,6 @@ $color-danger-500: #ff7b7b;
 // 参考标准: 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）的绝对大小关键字)
 
-$size-root: 16; // 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
-
 $text-small-map: (
 	// 14px
 	0: 0.875,
@@ -107,7 +105,7 @@ $text-large-map: (
 	--color-danger-500: #{$color-danger-500};
 
 	// 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
-	--size-root: #{$size-root};
+	--size-root: #{var.$size-root};
 
 	// 🔤 最小单位：等效于 1px：
 	// - 当使用 rem 方案：1px = calc(1 / var(--size-root) * 1rem)

package/components/box-card.scss

@@ -1,41 +0,0 @@
-/*!
-Example HTML:
-
-<div class="box-card">
-  <div class="box-wrapper">
-    <div class="box-header">
-      <span class="box-title">Title</span>
-    </div>
-    <div class="box-body">Content</div>
-  </div>
-</div>
-*/
-
-@use '../mixin' as mixin;
-
-.box-card {
-	position: relative;
-	font-size: 0;
-}
-
-.box-wrapper {
-	margin: 0 auto;
-}
-
-.box-header {
-	@include mixin.absolute-center(true, false);
-	top: 0;
-	display: flex;
-	align-items: center;
-}
-
-.box-title {
-	white-space: nowrap;
-}
-
-.box-body--bg {
-	width: 100%;
-	@include mixin.absolute-center(true, false);
-	top: 0;
-	z-index: -1;
-}

package/components/picture.scss

@@ -1,40 +0,0 @@
-@use '../mixin' as mixin;
-
-.picture {
-	position: relative;
-	--frame-width: 0.02rem;
-
-	> img {
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
-	}
-
-	// 图片内容
-	.picture-content {
-		&--center {
-			@include mixin.absolute-center(true, true);
-		}
-
-		&--bottom {
-			@include mixin.absolute-center(true, false);
-			bottom: 0;
-		}
-	}
-
-	// 图片边框
-	.picture-frame {
-		width: 100%;
-		height: 100%;
-		@include mixin.absolute-center(true, true);
-		z-index: 1;
-
-		+ img {
-			position: relative;
-			width: calc(100% - var(--frame-width) * 2);
-			height: calc(100% - var(--frame-width) * 2);
-			margin: var(--frame-width);
-			z-index: 0;
-		}
-	}
-}

package/components.scss

@@ -1,3 +0,0 @@
-@use './components/icon.scss';
-@use './components/picture.scss';
-@use './components/text.scss';