[doc]移除不再使用的全局样式文件global.css，并在app.css中添加多种动画效果的定义。

docs/site/package.json

@@ -5,12 +5,8 @@
 	"scripts": {
 		"env": "bun run scripts/env.js",
 		"dev": "bun run env && vite dev",
-		"bu": "vite build",
 		"preview": "vite preview",
-		"bp": "bun run build && bun run preview",
-		"miniglobal": "cleancss -o build/global.css build/global.css",
 		"build": "bun run env && vite build",
-		"all": "bun run env && vite build && bun run miniglobal",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
@@ -39,6 +35,7 @@
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
 		"rollup-plugin-md-ts": "file:../../packages/rollup-plugin-md-ts",
+		"rollup-plugin-stdf-icon": "file:../../packages/rollup-plugin-stdf-icon",
 		"stdf": "file:../../packages/stdf",
 		"svelte": "^5.7.1",
 		"svelte-check": "^4.1.1",

docs/site/src/app.css

@@ -65,6 +65,7 @@
 	--color-tailwind: oklch(0.746 0.16 232.661);
 	--color-svelte: oklch(0.702 0.194 38.137);
 
+	/* 抖动动效 */
 	--animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 	@keyframes shake {
 		10%,
@@ -86,6 +87,7 @@
 		}
 	}
 
+	/* 闪电动效 */
 	--animate-lightning: lightning 3s linear infinite;
 	@keyframes lightning {
 		0% {
@@ -105,6 +107,7 @@
 		}
 	}
 
+	/* 路径动效 */
 	--animate-path: path 3s linear infinite;
 	@keyframes path {
 		0% {
@@ -152,6 +155,7 @@
 		}
 	}
 
+	/* 动态背景动效 */
 	--animate-dynamicsBg: dynamicsBg 8s linear infinite;
 	@keyframes dynamicsBg {
 		0% {
@@ -170,6 +174,7 @@
 		}
 	}
 
+	/* 云朵移动动效 */
 	--animate-cloudMove: cloudMove 40s linear infinite;
 	@keyframes cloudMove {
 		0% {
@@ -183,6 +188,7 @@
 		}
 	}
 
+	/* 星星闪烁动效 */
 	--animate-starTwinkle: starTwinkle 8s linear infinite;
 	--animate-starTwinkle2: starTwinkle 3s linear infinite;
 	--animate-starTwinkle3: starTwinkle 6s linear infinite;
@@ -204,9 +210,322 @@
 			opacity: 1;
 		}
 	}
+
+	/* 元素上下慢慢循环移动动效 */
+	--animate-elementUpDownMove1: elementUpDownMove 12s linear infinite;
+	--animate-elementUpDownMove2: elementUpDownMove 10s linear infinite -12s;
+	--animate-elementUpDownMove3: elementUpDownMove 12s linear infinite -14s;
+	--animate-elementUpDownMove4: elementUpDownMove 8s linear infinite -10s;
+	--animate-elementUpDownMove5: elementUpDownMove 10s linear infinite -8s;
+	--animate-elementUpDownMove6: elementUpDownMove 12s linear infinite -6s;
+	@keyframes elementUpDownMove {
+		0% {
+			transform: translateY(-20px);
+		}
+		50% {
+			transform: translateY(20px);
+		}
+		100% {
+			transform: translateY(-20px);
+		}
+	}
 }
 @source "../../../packages/stdf/dist/**/*.svelte";
 pre {
 	background-color: transparent;
 	padding: 0;
 }
+
+*::-webkit-scrollbar {
+	width: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+	border-radius: 2px;
+	background-color: rgba(133, 133, 133, 0.5);
+}
+
+*::-webkit-scrollbar-track {
+	background-color: rgba(133, 133, 133, 0.2);
+}
+
+html {
+	overflow-x: hidden;
+	overflow-y: overlay;
+	/*scrollbar-gutter: stable;*/
+	/* scrollbar-gutter: stable both-edges; */
+	-webkit-tap-highlight-color: transparent;
+}
+* {
+	scrollbar-width: thin;
+}
+
+.prose :where(code):not(:where([class~='not-prose'] *))::before {
+	content: '' !important;
+}
+
+.prose :where(code):not(:where([class~='not-prose'] *))::after {
+	content: '' !important;
+}
+
+.prose :where(code):not(:where([class~='not-prose'] *)) {
+	padding-left: 4px;
+	padding-right: 4px;
+	border-radius: 2px;
+	background: #e4e4e4 !important;
+}
+
+.dark .dark\:prose-invert :where(code):not(:where([class~='not-prose'] *)) {
+	background: #202020 !important;
+}
+
+/*!
+  Theme: GitHub Light
+*/
+.prose pre code.hljs {
+	background: #e4e4e4 !important;
+}
+
+.prose pre code.hljs {
+	display: block;
+	overflow-x: auto;
+	padding: 1em;
+}
+
+.prose code.hljs {
+	padding: 3px 5px;
+}
+
+.prose .hljs {
+	/* background: #ebebeb !important; */
+	color: #434f54;
+}
+
+.prose .hljs-subst {
+	color: #434f54;
+}
+
+.prose .hljs-attribute,
+.prose .hljs-doctag,
+.prose .hljs-keyword,
+.prose .hljs-name,
+.prose .hljs-selector-tag {
+	/* color: #00979d; */
+	/* color: #0B24FB; */
+	/* color: #ff3e00; */
+	color: #af10a7;
+}
+
+.prose .hljs-addition,
+.prose .hljs-built_in,
+.prose .hljs-bullet,
+.prose .hljs-code,
+.prose .hljs-literal {
+	color: #d35400;
+}
+
+.prose .hljs-link,
+.prose .hljs-regexp,
+.prose .hljs-selector-attr,
+.prose .hljs-selector-pseudo,
+.prose .hljs-symbol,
+.prose .hljs-template-variable,
+.prose .hljs-variable {
+	/* color: #00979d; */
+	color: #0b24fb;
+	/* font-weight: bold; */
+	/* color: #8a3ce2; */
+}
+
+.prose .hljs-deletion,
+.prose .hljs-quote,
+.prose .hljs-selector-class,
+.prose .hljs-selector-id,
+.prose .hljs-string,
+.prose .hljs-template-tag,
+.prose .hljs-type {
+	/* color: #005c5f; */
+	color: rgb(56, 189, 248);
+}
+
+.prose .hljs-comment {
+	color: rgba(149, 165, 166, 0.8);
+}
+
+.prose .hljs-meta .hljs-keyword {
+	color: #728e00;
+}
+
+.prose .hljs-meta {
+	color: #434f54;
+}
+
+.prose .hljs-emphasis {
+	font-style: italic;
+}
+
+.prose .hljs-strong {
+	font-weight: 700;
+}
+
+.prose .hljs-function {
+	color: #728e00;
+}
+
+.prose .hljs-section,
+.prose .hljs-title {
+	/* color: #800; */
+	color: #0b24fb;
+	font-weight: 700;
+}
+
+.prose .hljs-number {
+	color: #8a7b52;
+}
+
+.dark .dark\:prose-invert pre code.hljs {
+	background: #202020 !important;
+}
+
+.dark .dark\:prose-invert pre code.hljs {
+	display: block;
+	overflow-x: auto;
+	padding: 1em;
+}
+
+.dark .dark\:prose-invert code.hljs {
+	padding: 3px 5px;
+}
+
+/*!
+  Theme: GitHub Dark
+*/
+.dark .dark\:prose-invert .hljs {
+	color: #c9d1d9;
+	/* background: #0d1117; */
+}
+
+.dark .dark\:prose-invert .hljs-doctag,
+.dark .dark\:prose-invert .hljs-keyword,
+.dark .dark\:prose-invert .hljs-meta .hljs-keyword,
+.dark .dark\:prose-invert .hljs-template-tag,
+.dark .dark\:prose-invert .hljs-template-variable,
+.dark .dark\:prose-invert .hljs-type,
+.dark .dark\:prose-invert .hljs-variable.language_ {
+	/* color: #ff7b72; */
+	color: #ffc043;
+}
+
+.dark .dark\:prose-invert .hljs-title,
+.dark .dark\:prose-invert .hljs-title.class_,
+.dark .dark\:prose-invert .hljs-title.class_.inherited__,
+.dark .dark\:prose-invert .hljs-title.function_ {
+	color: #d2a8ff;
+}
+
+.dark .dark\:prose-invert .hljs-attr,
+.dark .dark\:prose-invert .hljs-attribute,
+.dark .dark\:prose-invert .hljs-literal,
+.dark .dark\:prose-invert .hljs-meta,
+.dark .dark\:prose-invert .hljs-number,
+.dark .dark\:prose-invert .hljs-operator,
+.dark .dark\:prose-invert .hljs-selector-attr,
+.dark .dark\:prose-invert .hljs-selector-class,
+.dark .dark\:prose-invert .hljs-selector-id,
+.dark .dark\:prose-invert .hljs-variable {
+	color: #79c0ff;
+}
+
+.dark .dark\:prose-invert .hljs-meta .hljs-string,
+.dark .dark\:prose-invert .hljs-regexp,
+.dark .dark\:prose-invert .hljs-string {
+	color: #a5d6ff;
+}
+
+.dark .dark\:prose-invert .hljs-built_in,
+.dark .dark\:prose-invert .hljs-symbol {
+	color: #ffa657;
+}
+
+.dark .dark\:prose-invert .hljs-code,
+.dark .dark\:prose-invert .hljs-comment,
+.dark .dark\:prose-invert .hljs-formula {
+	color: #8b949e;
+}
+
+.dark .dark\:prose-invert .hljs-name,
+.dark .dark\:prose-invert .hljs-quote,
+.dark .dark\:prose-invert .hljs-selector-pseudo,
+.dark .dark\:prose-invert .hljs-selector-tag {
+	color: #7ee787;
+}
+
+.dark .dark\:prose-invert .hljs-subst {
+	color: #c9d1d9;
+}
+
+.dark .dark\:prose-invert .hljs-section {
+	color: #1f6feb;
+	font-weight: 700;
+}
+
+.dark .dark\:prose-invert .hljs-bullet {
+	color: #f2cc60;
+}
+
+.dark .dark\:prose-invert .hljs-emphasis {
+	color: #c9d1d9;
+	font-style: italic;
+}
+
+.dark .dark\:prose-invert .hljs-strong {
+	color: #c9d1d9;
+	font-weight: 700;
+}
+
+.dark .dark\:prose-invert .hljs-addition {
+	color: #aff5b4;
+	background-color: #033a16;
+}
+
+.dark .dark\:prose-invert .hljs-deletion {
+	color: #ffdcd7;
+	background-color: #67060c;
+}
+
+@font-face {
+	font-family: 'JetBrainsMono';
+	src: url('./assets/fonts/JetBrainsMono-Regular.woff2');
+}
+
+code {
+	font-family: 'JetBrainsMono' !important;
+}
+
+/* 模拟设计软件的透明层 */
+.transparent-background {
+	background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%),
+		linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%);
+	background-position:
+		0 0,
+		10px 10px;
+	background-size: 20px 20px;
+}
+
+@keyframes clip {
+	from {
+		clip-path: circle(0% at var(--x) var(--y));
+	}
+	to {
+		clip-path: circle(100% at var(--x) var(--y));
+	}
+}
+
+::view-transition-old(root) {
+	animation: none;
+}
+::view-transition-new(root) {
+	mix-blend-mode: normal;
+	animation: clip 0.6s ease-in;
+}
+

docs/site/src/app.html

@@ -11,12 +11,11 @@
 		<title>STDF - 移动 web 组件库</title>
 		<link href="/favicon.ico" rel="icon" media="(prefers-color-scheme: light)" />
 		<link href="/favicon_black.ico" rel="icon" media="(prefers-color-scheme: dark)" />
-		<link rel="stylesheet" href="/global.css" />
 		%sveltekit.head%
 	</head>
 	<body
 		data-sveltekit-preload-data="hover"
-		class="selection:bg-primary selection:text-white dark:selection:bg-dark dark:selection:text-black"
+		class="selection:bg-primary dark:selection:bg-dark selection:text-white dark:selection:text-black"
 	>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>

docs/site/src/utils/index.ts

@@ -500,6 +500,6 @@ export const colorObjToArr = (obj: Record<string, string>) => {
  * getOklchOpacity('oklch(0.5 0.5 0)', 0.5) // 'oklch(0.5 0.5 0 / 0.5)'
  */
 export const getOklchOpacity = (str: string, opacity: number) => {
-	// 将最后一个 ) 替换为 【/ 透明度】
+	// 将最后一个 ) 替换为【/ 透明度】
 	return str.replace(/\)$/, ` / ${opacity})`);
 };

docs/site/static/global.css

@@ -1,292 +0,0 @@
-*::-webkit-scrollbar {
-	width: 4px;
-}
-
-*::-webkit-scrollbar-thumb {
-	border-radius: 2px;
-	background-color: rgba(133, 133, 133, 0.5);
-}
-
-*::-webkit-scrollbar-track {
-	background-color: rgba(133, 133, 133, 0.2);
-}
-
-html {
-	overflow-x: hidden;
-	overflow-y: overlay;
-	/*scrollbar-gutter: stable;*/
-	/* scrollbar-gutter: stable both-edges; */
-	-webkit-tap-highlight-color: transparent;
-}
-* {
-	scrollbar-width: thin;
-}
-
-.prose :where(code):not(:where([class~='not-prose'] *))::before {
-	content: '' !important;
-}
-
-.prose :where(code):not(:where([class~='not-prose'] *))::after {
-	content: '' !important;
-}
-
-.prose :where(code):not(:where([class~='not-prose'] *)) {
-	padding-left: 4px;
-	padding-right: 4px;
-	border-radius: 2px;
-	background: #e4e4e4 !important;
-}
-
-.dark .dark\:prose-invert :where(code):not(:where([class~='not-prose'] *)) {
-	background: #202020 !important;
-}
-
-/*!
-  Theme: GitHub Light
-*/
-.prose pre code.hljs {
-	background: #e4e4e4 !important;
-}
-
-.prose pre code.hljs {
-	display: block;
-	overflow-x: auto;
-	padding: 1em;
-}
-
-.prose code.hljs {
-	padding: 3px 5px;
-}
-
-.prose .hljs {
-	/* background: #ebebeb !important; */
-	color: #434f54;
-}
-
-.prose .hljs-subst {
-	color: #434f54;
-}
-
-.prose .hljs-attribute,
-.prose .hljs-doctag,
-.prose .hljs-keyword,
-.prose .hljs-name,
-.prose .hljs-selector-tag {
-	/* color: #00979d; */
-	/* color: #0B24FB; */
-	/* color: #ff3e00; */
-	color: #af10a7;
-}
-
-.prose .hljs-addition,
-.prose .hljs-built_in,
-.prose .hljs-bullet,
-.prose .hljs-code,
-.prose .hljs-literal {
-	color: #d35400;
-}
-
-.prose .hljs-link,
-.prose .hljs-regexp,
-.prose .hljs-selector-attr,
-.prose .hljs-selector-pseudo,
-.prose .hljs-symbol,
-.prose .hljs-template-variable,
-.prose .hljs-variable {
-	/* color: #00979d; */
-	color: #0b24fb;
-	/* font-weight: bold; */
-	/* color: #8a3ce2; */
-}
-
-.prose .hljs-deletion,
-.prose .hljs-quote,
-.prose .hljs-selector-class,
-.prose .hljs-selector-id,
-.prose .hljs-string,
-.prose .hljs-template-tag,
-.prose .hljs-type {
-	/* color: #005c5f; */
-	color: rgb(56, 189, 248);
-}
-
-.prose .hljs-comment {
-	color: rgba(149, 165, 166, 0.8);
-}
-
-.prose .hljs-meta .hljs-keyword {
-	color: #728e00;
-}
-
-.prose .hljs-meta {
-	color: #434f54;
-}
-
-.prose .hljs-emphasis {
-	font-style: italic;
-}
-
-.prose .hljs-strong {
-	font-weight: 700;
-}
-
-.prose .hljs-function {
-	color: #728e00;
-}
-
-.prose .hljs-section,
-.prose .hljs-title {
-	/* color: #800; */
-	color: #0b24fb;
-	font-weight: 700;
-}
-
-.prose .hljs-number {
-	color: #8a7b52;
-}
-
-.dark .dark\:prose-invert pre code.hljs {
-	background: #202020 !important;
-}
-
-.dark .dark\:prose-invert pre code.hljs {
-	display: block;
-	overflow-x: auto;
-	padding: 1em;
-}
-
-.dark .dark\:prose-invert code.hljs {
-	padding: 3px 5px;
-}
-
-/*!
-  Theme: GitHub Dark
-*/
-.dark .dark\:prose-invert .hljs {
-	color: #c9d1d9;
-	/* background: #0d1117; */
-}
-
-.dark .dark\:prose-invert .hljs-doctag,
-.dark .dark\:prose-invert .hljs-keyword,
-.dark .dark\:prose-invert .hljs-meta .hljs-keyword,
-.dark .dark\:prose-invert .hljs-template-tag,
-.dark .dark\:prose-invert .hljs-template-variable,
-.dark .dark\:prose-invert .hljs-type,
-.dark .dark\:prose-invert .hljs-variable.language_ {
-	/* color: #ff7b72; */
-	color: #ffc043;
-}
-
-.dark .dark\:prose-invert .hljs-title,
-.dark .dark\:prose-invert .hljs-title.class_,
-.dark .dark\:prose-invert .hljs-title.class_.inherited__,
-.dark .dark\:prose-invert .hljs-title.function_ {
-	color: #d2a8ff;
-}
-
-.dark .dark\:prose-invert .hljs-attr,
-.dark .dark\:prose-invert .hljs-attribute,
-.dark .dark\:prose-invert .hljs-literal,
-.dark .dark\:prose-invert .hljs-meta,
-.dark .dark\:prose-invert .hljs-number,
-.dark .dark\:prose-invert .hljs-operator,
-.dark .dark\:prose-invert .hljs-selector-attr,
-.dark .dark\:prose-invert .hljs-selector-class,
-.dark .dark\:prose-invert .hljs-selector-id,
-.dark .dark\:prose-invert .hljs-variable {
-	color: #79c0ff;
-}
-
-.dark .dark\:prose-invert .hljs-meta .hljs-string,
-.dark .dark\:prose-invert .hljs-regexp,
-.dark .dark\:prose-invert .hljs-string {
-	color: #a5d6ff;
-}
-
-.dark .dark\:prose-invert .hljs-built_in,
-.dark .dark\:prose-invert .hljs-symbol {
-	color: #ffa657;
-}
-
-.dark .dark\:prose-invert .hljs-code,
-.dark .dark\:prose-invert .hljs-comment,
-.dark .dark\:prose-invert .hljs-formula {
-	color: #8b949e;
-}
-
-.dark .dark\:prose-invert .hljs-name,
-.dark .dark\:prose-invert .hljs-quote,
-.dark .dark\:prose-invert .hljs-selector-pseudo,
-.dark .dark\:prose-invert .hljs-selector-tag {
-	color: #7ee787;
-}
-
-.dark .dark\:prose-invert .hljs-subst {
-	color: #c9d1d9;
-}
-
-.dark .dark\:prose-invert .hljs-section {
-	color: #1f6feb;
-	font-weight: 700;
-}
-
-.dark .dark\:prose-invert .hljs-bullet {
-	color: #f2cc60;
-}
-
-.dark .dark\:prose-invert .hljs-emphasis {
-	color: #c9d1d9;
-	font-style: italic;
-}
-
-.dark .dark\:prose-invert .hljs-strong {
-	color: #c9d1d9;
-	font-weight: 700;
-}
-
-.dark .dark\:prose-invert .hljs-addition {
-	color: #aff5b4;
-	background-color: #033a16;
-}
-
-.dark .dark\:prose-invert .hljs-deletion {
-	color: #ffdcd7;
-	background-color: #67060c;
-}
-
-@font-face {
-	font-family: 'JetBrainsMono';
-	src: url('./assets/fonts/JetBrainsMono-Regular.woff2');
-}
-
-code {
-	font-family: 'JetBrainsMono' !important;
-}
-
-/* 模拟设计软件的透明层 */
-.transparent-background {
-	background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%),
-		linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%);
-	background-position:
-		0 0,
-		10px 10px;
-	background-size: 20px 20px;
-}
-
-@keyframes clip {
-	from {
-		clip-path: circle(0% at var(--x) var(--y));
-	}
-	to {
-		clip-path: circle(100% at var(--x) var(--y));
-	}
-}
-
-::view-transition-old(root) {
-	animation: none;
-}
-::view-transition-new(root) {
-	mix-blend-mode: normal;
-	animation: clip 0.6s ease-in;
-}