@nopon-web/styles 0.0.1

package/_function.scss

@@ -0,0 +1,21 @@
+@use 'sass:string';
+@use './_variables' as var;
+
+@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.scss

@@ -0,0 +1,44 @@
+@use './_variables' as var;
+@use './_function' as func;
+
+@mixin absolute-center($x: true, $y: true) {
+	position: absolute;
+
+	@if $y {
+		top: 50%;
+	}
+
+	@if $x {
+		left: 50%;
+	}
+
+	transform: translate(#{if($x, '-50%', '0')}, #{if($y, '-50%', '0')});
+}
+
+@mixin set-z-index($number) {
+	z-index: calc(var(--z-index-base, var.$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: func.get-image($image);
+}
+
+@mixin bg-border($width, $height, $image) {
+	min-width: $width;
+	height: $height;
+	border-image-source: func.get-image($image);
+}
+
+@mixin bg-text($image) {
+	background-clip: text;
+	-webkit-background-clip: text;
+	color: transparent;
+	-webkit-text-fill-color: transparent;
+	background-image: func.get-image($image);
+}

package/_variables.scss

@@ -0,0 +1,2 @@
+// 层级
+$z-index-base: 1000;

package/animation.scss

@@ -0,0 +1,18 @@
+@keyframes like-floating {
+	from {
+		transform: translateY(0) scale(0.5);
+	}
+	to {
+		transform: translateY(-180%) scale(1.5);
+		opacity: 0;
+	}
+}
+
+.animation {
+	&-like_floating {
+		animation-name: like-floating;
+		animation-duration: 1s;
+		animation-timing-function: ease-out;
+		animation-fill-mode: forwards;
+	}
+}

package/atomic.scss

@@ -0,0 +1,60 @@
+// flex
+.flex {
+	display: flex;
+}
+.flex-1 {
+	flex: 1 1 0%;
+}
+.flex-auto {
+	flex: 1 1 auto;
+}
+.flex-initial {
+	flex: 0 1 auto;
+}
+.flex-none {
+	flex: none;
+}
+.justify-normal {
+	justify-content: normal;
+}
+.justify-start {
+	justify-content: flex-start;
+}
+.justify-end {
+	justify-content: flex-end;
+}
+.justify-center {
+	justify-content: center;
+}
+.justify-between {
+	justify-content: space-between;
+}
+.justify-around {
+	justify-content: space-around;
+}
+.justify-evenly {
+	justify-content: space-evenly;
+}
+.justify-stretch {
+	justify-content: stretch;
+}
+.items-start {
+	align-items: flex-start;
+}
+.items-end {
+	align-items: flex-end;
+}
+.items-center {
+	align-items: center;
+}
+.items-baseline {
+	align-items: baseline;
+}
+.items-stretch {
+	align-items: stretch;
+}
+.text-overflow {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

package/base.scss

@@ -0,0 +1,9 @@
+* {
+	box-sizing: border-box;
+}
+
+ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}

package/components/icon.scss

@@ -0,0 +1,8 @@
+@use '../_variables' as var;
+
+// 图标
+.icon {
+	display: inline-block;
+	vertical-align: middle;
+	font-size: var(--text-xs);
+}

package/components/picture.scss

@@ -0,0 +1,26 @@
+@use '../mixin' as mixin;
+
+// 图片
+.picture {
+	position: relative;
+
+	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;
+		}
+	}
+
+	&:has(.picture-content) {
+		position: relative;
+	}
+}

package/components/popup.scss

@@ -0,0 +1,48 @@
+@use '../_variables' as var;
+
+.popup {
+	overflow: hidden;
+
+	&.no-scroll {
+		.popup-wrapper {
+			display: flex;
+			flex-direction: column;
+		}
+		.popup-body {
+			flex: 1;
+		}
+	}
+}
+
+.popup-wrapper {
+	height: 100%;
+}
+
+.popup-header--title {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.popup-body {
+	position: relative;
+	overflow-y: scroll;
+}
+
+.popup-footer {
+	text-align: center;
+}
+
+.popup-footer--button_list {
+	display: flex;
+	align-items: flex-end;
+}
+
+// 自定义
+.footer-custom {
+	position: sticky;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+}

package/components/scroll-bar.scss

@@ -0,0 +1,31 @@
+.s-scroll {
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	&-bar {
+		&_x {
+			position: relative;
+			.s-scroll-bar_thumb {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				height: 6px;
+			}
+		}
+
+		&_y {
+			position: relative;
+			.s-scroll-bar_thumb {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+			}
+		}
+
+		&_thumb {
+			background-color: var(--theme-color);
+		}
+	}
+}

package/components/text.scss

@@ -0,0 +1,8 @@
+@use '../_variables' as var;
+
+// 文本
+.text {
+	display: inline-block;
+	font-size: var(--text-sm);
+	line-height: 1;
+}

package/components.scss

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

package/index.scss

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

package/normalize.css

@@ -0,0 +1,378 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+}
+
+/* Sections
+       ========================================================================== */
+
+/**
+     * Remove the margin in all browsers.
+     */
+
+body {
+  margin: 0;
+}
+
+/**
+     * Render the `main` element consistently in IE.
+     */
+
+main {
+  display: block;
+}
+
+/**
+     * Correct the font size and margin on `h1` elements within `section` and
+     * `article` contexts in Chrome, Firefox, and Safari.
+     */
+
+h1 {
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+       ========================================================================== */
+
+/**
+     * 1. Add the correct box sizing in Firefox.
+     * 2. Show the overflow in Edge and IE.
+     */
+
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
+}
+
+/**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/* Text-level semantics
+       ========================================================================== */
+
+/**
+     * Remove the gray background on active links in IE 10.
+     */
+
+a {
+  background-color: transparent;
+}
+
+/**
+     * 1. Remove the bottom border in Chrome 57-
+     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+     */
+
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
+
+/**
+     * Add the correct font weight in Chrome, Edge, and Safari.
+     */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
+     * Add the correct font size in all browsers.
+     */
+
+small {
+  font-size: 80%;
+}
+
+/**
+     * Prevent `sub` and `sup` elements from affecting the line height in
+     * all browsers.
+     */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+       ========================================================================== */
+
+/**
+     * Remove the border on images inside links in IE 10.
+     */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+       ========================================================================== */
+
+/**
+     * 1. Change the font styles in all browsers.
+     * 2. Remove the margin in Firefox and Safari.
+     */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+
+/**
+     * Show the overflow in IE.
+     * 1. Show the overflow in Edge.
+     */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+     * Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 1. Remove the inheritance of text transform in Firefox.
+     */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+     * Correct the inability to style clickable types in iOS and Safari.
+     */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+     * Remove the inner border and padding in Firefox.
+     */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+     * Restore the focus styles unset by the previous rule.
+     */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+     * Correct the padding in Firefox.
+     */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+     * 1. Correct the text wrapping in Edge and IE.
+     * 2. Correct the color inheritance from `fieldset` elements in IE.
+     * 3. Remove the padding so developers are not caught out when they zero out
+     *    `fieldset` elements in all browsers.
+     */
+
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+
+/**
+     * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+     */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+     * Remove the default vertical scrollbar in IE 10+.
+     */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+     * 1. Add the correct box sizing in IE 10.
+     * 2. Remove the padding in IE 10.
+     */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+
+/**
+     * Correct the cursor style of increment and decrement buttons in Chrome.
+     */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+     * 1. Correct the odd appearance in Chrome and Safari.
+     * 2. Correct the outline style in Safari.
+     */
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/**
+     * Remove the inner padding in Chrome and Safari on macOS.
+     */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+     * 1. Correct the inability to style clickable types in iOS and Safari.
+     * 2. Change font properties to `inherit` in Safari.
+     */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/* Interactive
+       ========================================================================== */
+
+/*
+     * Add the correct display in Edge, IE 10+, and Firefox.
+     */
+
+details {
+  display: block;
+}
+
+/*
+     * Add the correct display in all browsers.
+     */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+       ========================================================================== */
+
+/**
+     * Add the correct display in IE 10+.
+     */
+
+template {
+  display: none;
+}
+
+/**
+     * Add the correct display in IE 10.
+     */
+
+[hidden] {
+  display: none;
+}

package/package.json

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

package/theme.scss

@@ -0,0 +1,159 @@
+@use 'sass:map';
+@use './_variables' as var;
+
+// -----------------------------
+// 🎨 颜色设计变量命名规范
+// -----------------------------
+// 设计参考: 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
+
+// 主题色
+$theme-color-50: #ede6ff;
+$theme-color-500: #6e64c8;
+
+// 基础色(背景/字体)
+$color-base-50: #fff;
+$color-base-250: #f5f6f7;
+$color-base-500: #eee;
+$color-base-inverse-50: #777777;
+$color-base-inverse-250: #333333;
+$color-base-inverse-500: #000000;
+
+// 警告色
+$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）的绝对大小关键字)
+
+$size-root: 16; // 🔤 尺寸基准值，控制设计稿与真实页面的缩放比例
+
+$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 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: #{$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);
+}