[stdf]v0.4.0

packages/stdf/assets/svg_base/ri-user-add-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM18 17V14H20V17H23V19H20V22H18V19H15V17H18Z"></path></svg>

packages/stdf/components/avatar/Avatar.svelte

@@ -1,6 +1,11 @@
 <script>
+	import { createEventDispatcher } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
 	// 图片地址
 	// image url
 	export let image = '';
@@ -11,7 +16,7 @@
 
 	// 替换Icon
 	// replace Icon
-	export let icon = { name: 'ri-user-3-line', theme: true, size: 32 };
+	export let icon = { name: 'ri-user-3-line', theme: true };
 
 	// 替换文本大小
 	// replace text size
@@ -21,9 +26,9 @@
 	// radius style:none/base/xl/full
 	export let radius = 'base';
 
-	// 头像框大小，xs/sm/md/lg/xl
-	// avatar size:xs/sm/md/lg/xl
-	export let size = 'md';
+	// 头像框大小，xs/sm/base/md/lg/xl
+	// avatar size:xs/sm/base/md/lg/xl
+	export let size = 'base';
 
 	// 头像图片大小，s/m/l
 	// avatar image size:s/m/l
@@ -53,9 +58,11 @@
 	const sizeObj = {
 		xs: 'w-6 h-6',
 		sm: 'w-10 h-10',
+		base: 'w-12 h-12',
 		md: 'w-16 h-16',
 		lg: 'w-20 h-20',
-		xl: 'w-32 h-32',
+		xl: 'w-28 h-28',
+		'2xl': 'w-32 h-32',
 	};
 
 	// 头像图片大小样式
@@ -84,20 +91,37 @@
 		lg: 'text-6xl',
 		xl: 'text-8xl',
 	};
+
+	// 当默认情况时根据 size 计算 Icon 大小
+	// when default, calculate Icon size by size
+	const iconSizeObj = {
+		xs: 12,
+		sm: 20,
+		base: 24,
+		md: 32,
+		lg: 40,
+		xl: 56,
+		'2xl': 64,
+	};
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class={`bg-primary/10 dark:bg-dark/20 flex justify-center overflow-hidden relative ${lineObj[line] || ''} ${
+	class={`bg-primary-200 dark:bg-dark-200 flex justify-center overflow-hidden relative ${lineObj[line] || ''} ${
 		sizeObj[size] || sizeObj.md
 	} ${radiusObj[radius] || radiusObj.base} ${injClass}`}
+	on:click={() => {
+		dispatch('click');
+	}}
 >
 	{#if image === '' && alt === ''}
 		<div class="m-auto">
-			<Icon {...icon} />
+			<Icon size={iconSizeObj[size] || iconSizeObj.base} {...icon} injClass="text-primary-950 dark:text-dark-950" />
 		</div>
 	{:else if image === '' && alt !== ''}
 		<div
-			class={`text-center ${altSizeObj[altSize] || altSizeObj.base}`}
+			class={`text-center text-primary-950 dark:text-dark-950 ${altSizeObj[altSize] || altSizeObj.base}`}
 			style="position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);"
 		>
 			{alt}

packages/stdf/components/avatar/Avatars.svelte

@@ -0,0 +1,205 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import Avatar from './Avatar.svelte';
+	import Icon from '../icon/Icon.svelte';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * 头像数据
+	 * avatar data
+	 * @type {Array}
+	 */
+	export let data = [];
+
+	/**
+	 * 圆角风格
+	 * radius style
+	 * @type {'none'|'base'|'xl'|'2xl'|'3xl'|'full'}
+	 * @default 'base'
+	 */
+	export let radius = 'full';
+
+	/**
+	 * 头像框大小
+	 * avatar size
+	 * @type {'xs'|'sm'|'base'|'md'|'lg'|'xl'}
+	 * @default 'base'
+	 */
+	export let size = 'base';
+
+	/**
+	 * 紧凑度，1-10
+	 * compactness, 1-10
+	 * @type {Number}
+	 * @default 5
+	 */
+	export let compact = 5;
+
+	/**
+	 * 边框粗细
+	 * border width
+	 * @type {'0'|'1'|'2'|'3'|'4'|'8'}
+	 * @default '3'
+	 */
+	export let lineWidth = '3';
+
+	/**
+	 * 是否反向
+	 * is reverse
+	 * @type {Boolean}
+	 * @default false
+	 */
+	export let reverse = false;
+
+	/**
+	 * 最大显示数量
+	 * max display count
+	 * @type {Number}
+	 * @default 10
+	 */
+	export let max = 10;
+
+	/**
+	 * 顶层内容
+	 * top content
+	 * @type {'totle'|'add'|'none'|'slot'}
+	 * @default 'totle'
+	 */
+	export let top = 'totle';
+
+	/**
+	 * 注入CSS
+	 * inject CSS
+	 * @type {String}
+	 * @default ''
+	 */
+	export let injClass = '';
+
+	// 圆角风格样式
+	// radius style
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		xl: 'rounded-xl',
+		'2xl': 'rounded-2xl',
+		'3xl': 'rounded-3xl',
+		full: 'rounded-full',
+	};
+	// 边框粗细样式
+	// border width style
+	const lineWidthClass = {
+		0: 'ring-0',
+		1: 'ring-1',
+		2: 'ring-2',
+		3: 'ring',
+		4: 'ring-4',
+		8: 'ring-8',
+	};
+
+	// 头像框大小样式
+	// avatar size style
+	const sizeObj = {
+		xs: 'w-6 h-6',
+		sm: 'w-10 h-10',
+		base: 'w-12 h-12',
+		md: 'w-16 h-16',
+		lg: 'w-20 h-20',
+		xl: 'w-28 h-28',
+		'2xl': 'w-32 h-32',
+	};
+
+	// 替换文本大小样式
+	// replace text size style
+	const textSizeObj = {
+		xs: 'text-xs',
+		sm: 'text-sm',
+		base: 'text-lg',
+		md: 'text-3xl',
+		lg: 'text-4xl',
+		xl: 'text-6xl',
+	};
+
+	$: dataInner = data.slice(0, max);
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="flex"
+	on:click={() => {
+		dispatch('clickgroup');
+	}}
+>
+	{#if reverse}
+		<div
+			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
+				radiusObj.base} {injClass}"
+			style="z-index:{dataInner.length}"
+		>
+			{#if top === 'totle'}
+				<div
+					class="bg-primary-200 dark:bg-dark-200 flex flex-col text-center justify-center overflow-hidden text-primary-950 dark:text-dark-950 {radiusObj[
+						radius
+					] || radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+				>
+					+{data.length}
+				</div>
+			{:else if top === 'add'}
+				<div
+					class="bg-primary-200 dark:bg-dark-200 flex flex-col text-center justify-center overflow-hidden {radiusObj[radius] ||
+						radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+				>
+					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
+				</div>
+			{:else if top === 'slot'}
+				<slot />
+			{:else if top === 'none'}
+				<!-- none -->
+			{:else}
+				<span>Please pass in the correct top!</span>
+			{/if}
+		</div>
+	{/if}
+	{#each dataInner as item, i}
+		<div
+			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
+				radiusObj.base} {injClass}"
+			style="transform: translateX({-compact * 10 * i - (reverse ? 50 : 0)}%);z-index:{reverse ? dataInner.length - 1 - i : i}"
+		>
+			<Avatar {radius} {size} {...item} />
+		</div>
+	{/each}
+	{#if !reverse}
+		<div
+			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
+				radiusObj.base} {injClass}"
+			style="transform: translateX(-{compact * 10 * dataInner.length}%);z-index:{dataInner.length}"
+		>
+			{#if top === 'totle'}
+				<div
+					class="bg-primary-200 dark:bg-dark-200 flex flex-col text-center justify-center overflow-hidden text-primary-950 dark:text-dark-950 {radiusObj[
+						radius
+					] || radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+				>
+					+{data.length}
+				</div>
+			{:else if top === 'add'}
+				<div
+					class="bg-primary-200 dark:bg-dark-200 flex flex-col text-center justify-center overflow-hidden {radiusObj[radius] ||
+						radiusObj.base} {sizeObj[size] || sizeObj.md} {textSizeObj[size] || textSizeObj.base}"
+				>
+					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
+				</div>
+			{:else if top === 'slot'}
+				<slot />
+			{:else if top === 'none'}
+				<!-- none -->
+			{:else}
+				<span>Please pass in the correct top!</span>
+			{/if}
+		</div>
+	{/if}
+</div>

packages/stdf/components/bottomSheet/BottomSheet.svelte

@@ -286,7 +286,7 @@
 <div class={`fixed w-screen h-screen inset-0 flex flex-col justify-end px-0 pointer-events-none`} style={`z-index:${zIndex};`}>
 	{#if visible}
 		<div
-			class={`fixed w-screen bg-white dark:bg-gray1${windowRadiusClass[radius] || windowRadiusClass['full']} pointer-events-auto${
+			class={`fixed w-screen bg-white dark:bg-gray-950${windowRadiusClass[radius] || windowRadiusClass['full']} pointer-events-auto${
 				isTouch ? '' : ' transition-all duration-300'
 			}`}
 			style={`height:${stayHeightList[stayHeightList.length - 1]}%;top:${currentTop}%;`}

packages/stdf/components/button/Button.svelte

@@ -79,10 +79,10 @@
 	// Fill mode style
 	const fillObj = {
 		base: '',
-		line: 'border border-gray1 dark:border-white !text-black dark:!text-white/90',
-		lineLight: 'border border-black/20 dark:border-white/20 !text-black dark:!text-white/90',
+		line: 'border border-black dark:border-white !text-black dark:!text-white',
+		lineLight: 'border border-black/20 dark:border-white/30 !text-black dark:!text-white',
 		lineTheme: 'border border-primary dark:border-dark !text-primary dark:!text-dark',
-		text: '!text-black dark:!text-white/90',
+		text: '!text-black dark:!text-white',
 		textTheme: '!text-primary dark:!text-dark',
 		colorLight: '!bg-black/5 dark:!bg-white/10 !text-black dark:!text-white',
 	};

packages/stdf/components/calendar/Calendar.svelte

@@ -372,7 +372,7 @@
 	{...popup}
 >
 	<div>
-		<div class="sticky z-10 top-0 left-0 w-full bg-gray9 dark:bg-gray1">
+		<div class="sticky z-10 top-0 left-0 w-full bg-gray-50 dark:bg-gray-800">
 			{#if quickSelects.length > 0 && mode === 'range'}
 				<div class="flex flex-nowrap gap-4 px-4 pt-2 pb-1 overflow-x-auto calendar-container">
 					{#each quickSelects as item}
@@ -412,7 +412,7 @@
 			</div>
 		</div>
 		<div
-			class={`bg-gray9 dark:bg-gray1 py-2 px-4 flex flex-col gap-4 overflow-y-auto calendar-container ${
+			class={`bg-gray-50 dark:bg-gray-800 py-2 px-4 flex flex-col gap-4 overflow-y-auto calendar-container ${
 				useAnimation ? 'scroll-smooth' : 'scroll-auto'
 			}`}
 			style="height:{(window.innerHeight * height) / 100}px"
@@ -539,7 +539,7 @@
 				</div>
 			{/each}
 		</div>
-		<div class="sticky z-10 bottom-0 left-0 w-full bg-gray9 dark:bg-gray1">
+		<div class="sticky z-10 bottom-0 left-0 w-full bg-gray-50 dark:bg-gray-800">
 			<Button {...button} on:click={confirmFunc}>
 				{confirmText}
 				{showSelectedDay && mode !== 'single' && selectedDateStr.split(',').length > 0

packages/stdf/components/cell/Cell.svelte

@@ -139,7 +139,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	on:click={setClickFun}
-	class={`px-4 cursor-pointer bg-white dark:bg-gray1${clickAll ? ' active:bg-gray8 dark:active:bg-gray4' : ''} ${
+	class={`px-4 cursor-pointer bg-white dark:bg-gray-800${clickAll ? ' active:bg-gray-100 dark:active:bg-gray-600' : ''} ${
 		myClass[my] || myClass['4']
 	}${mxClass[mx] || mxClass['2']}${radiusObj[radius] || radiusObj['lg']} ${shadowClass[shadow] || shadowClass['sm']}${
 		love ? ' text-xl' : ''
@@ -161,7 +161,7 @@
 			{/if}
 			<div class={`flex flex-col ${subTitle === '' ? 'justify-center' : 'justify-between'}`}>
 				<div class="font-medium">{title}</div>
-				<div class="text-xs text-gray5 dark:text-gray6">{subTitle}</div>
+				<div class="text-xs text-gray-500 dark:text-gray-400">{subTitle}</div>
 			</div>
 		</div>
 		<!-- right -->
@@ -172,14 +172,14 @@
 						{commonLang.slotEmpty}
 					</slot>
 				{:else}
-					<div class="text-gray6">{detail}</div>
+					<div class="text-gray-700 dark:text-gray-300">{detail}</div>
 				{/if}
-				<div class="text-xs text-gray5 dark:text-gray6 font-light">{info}</div>
+				<div class="text-xs text-gray-500 dark:text-gray-400 font-light">{info}</div>
 			</div>
 			{#if right === 'none'}
 				<!-- none -->
 			{:else if right === 'arrow'}
-				<div class="text-gray6 flex flex-col justify-center">
+				<div class="text-gray-700 dark:text-gray-300 flex flex-col justify-center">
 					<Icon name="ri-arrow-right-s-line" size={love ? 26 : 20} alpha={0.6} top={-2} />
 				</div>
 			{:else if right?.constructor === Object && right.type === 'switch'}

packages/stdf/components/cell/CellGroup.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div
-	class={`bg-white dark:bg-gray1 overflow-hidden${shadowClass[shadow] || shadowClass['sm']}${radiusClass[radius] || radiusClass['lg']}${
+	class={`bg-white dark:bg-black overflow-hidden${shadowClass[shadow] || shadowClass['sm']}${radiusClass[radius] || radiusClass['lg']}${
 		myClass[my] || myClass['4']
 	}${mxClass[mx] || mxClass['2']}`}
 >

packages/stdf/components/divider/Divider.svelte

@@ -102,7 +102,7 @@
 			/>
 		{/if}
 		{#if text !== ''}
-			<div class={`flex-none mx-2 text-xs text-gray6 ${injClass}`}>{text}</div>
+			<div class={`flex-none mx-2 text-xs text-gray-400 ${injClass}`}>{text}</div>
 		{/if}
 		{#if (text !== '' && align !== 'right') || text === ''}
 			<div

packages/stdf/components/index.js

@@ -1,91 +1,93 @@
+import ActionSheet from './actionSheet/ActionSheet.svelte';
+import AsyncPicker from './asyncPicker/AsyncPicker.svelte';
+import Avatar from './avatar/Avatar.svelte';
+import Avatars from './avatar/Avatars.svelte';
+import Badge from './badge/Badge.svelte';
+import BottomSheet from './bottomSheet/BottomSheet.svelte';
 import Button from './button/Button.svelte';
-import NavBar from './navBar/NavBar.svelte';
-import Icon from './icon/Icon.svelte';
-import Divider from './divider/Divider.svelte';
+import Calendar from './calendar/Calendar.svelte';
 import Cell from './cell/Cell.svelte';
 import CellGroup from './cell/CellGroup.svelte';
-import Switch from './switch/Switch.svelte';
-import Avatar from './avatar/Avatar.svelte';
-import Tabs from './tabs/Tabs.svelte';
-import Tab from './tabs/Tab.svelte';
-import TabContent from './tabs/TabContent.svelte';
-import TabBar from './tabBar/TabBar.svelte';
-import Steps from './steps/Steps.svelte';
-import IndexBar from './indexBar/IndexBar.svelte';
-import Radio from './radio/Radio.svelte';
-import RadioGroup from './radio/RadioGroup.svelte';
 import Checkbox from './checkbox/Checkbox.svelte';
 import CheckboxGroup from './checkbox/CheckboxGroup.svelte';
-import Input from './input/Input.svelte';
-import Grids from './grids/Grids.svelte';
+import Dialog from './dialog/Dialog.svelte';
+import Divider from './divider/Divider.svelte';
 import Grid from './grids/Grid.svelte';
-import Swiper from './swiper/Swiper.svelte';
-import Placeholder from './placeholder/Placeholder.svelte';
-import Skeleton from './skeleton/Skeleton.svelte';
-import Rate from './rate/Rate.svelte';
-import Slider from './slider/Slider.svelte';
-import Badge from './badge/Badge.svelte';
-import NoticeBar from './noticeBar/NoticeBar.svelte';
-import Progress from './progress/Progress.svelte';
-import ProgressLoop from './progressLoop/ProgressLoop.svelte';
-import Mask from './mask/Mask.svelte';
-import Toast from './toast/Toast.svelte';
+import Grids from './grids/Grids.svelte';
+import Icon from './icon/Icon.svelte';
+import IndexBar from './indexBar/IndexBar.svelte';
+import Input from './input/Input.svelte';
 import Loading from './loading/Loading.svelte';
-import Popup from './popup/Popup.svelte';
-import BottomSheet from './bottomSheet/BottomSheet.svelte';
+import Mask from './mask/Mask.svelte';
 import Modal from './modal/Modal.svelte';
-import Dialog from './dialog/Dialog.svelte';
-import ActionSheet from './actionSheet/ActionSheet.svelte';
+import NavBar from './navBar/NavBar.svelte';
+import NoticeBar from './noticeBar/NoticeBar.svelte';
+import NumKeyboard from './numKeyboard/NumKeyboard.svelte';
+import Pagination from './pagination/Pagination.svelte';
 import Picker from './picker/Picker.svelte';
-import AsyncPicker from './asyncPicker/AsyncPicker.svelte';
+import Placeholder from './placeholder/Placeholder.svelte';
+import Popup from './popup/Popup.svelte';
+import Progress from './progress/Progress.svelte';
+import ProgressLoop from './progressLoop/ProgressLoop.svelte';
+import Radio from './radio/Radio.svelte';
+import RadioGroup from './radio/RadioGroup.svelte';
+import Rate from './rate/Rate.svelte';
+import Skeleton from './skeleton/Skeleton.svelte';
+import Slider from './slider/Slider.svelte';
+import Steps from './steps/Steps.svelte';
+import Switch from './switch/Switch.svelte';
+import Swiper from './swiper/Swiper.svelte';
+import Tab from './tabs/Tab.svelte';
+import TabBar from './tabBar/TabBar.svelte';
+import TabContent from './tabs/TabContent.svelte';
+import Tabs from './tabs/Tabs.svelte';
 import TimePicker from './timePicker/TimePicker.svelte';
-import Calendar from './calendar/Calendar.svelte';
-import Pagination from './pagination/Pagination.svelte';
-import NumKeyboard from './numKeyboard/NumKeyboard.svelte';
+import Toast from './toast/Toast.svelte';
 
 export {
+	ActionSheet,
+	AsyncPicker,
+	Avatar,
+	Avatars,
+	Badge,
+	BottomSheet,
 	Button,
-	NavBar,
-	Icon,
-	Divider,
+	Calendar,
 	Cell,
 	CellGroup,
-	Switch,
-	Avatar,
-	Tabs,
-	Tab,
-	TabContent,
-	TabBar,
-	Steps,
-	IndexBar,
-	Radio,
-	RadioGroup,
 	Checkbox,
 	CheckboxGroup,
-	Input,
-	Grids,
+	Dialog,
+	Divider,
 	Grid,
-	Swiper,
-	Placeholder,
-	Skeleton,
-	Rate,
-	Slider,
-	Badge,
-	NoticeBar,
-	Progress,
-	ProgressLoop,
-	Toast,
-	Mask,
+	Grids,
+	Icon,
+	IndexBar,
+	Input,
 	Loading,
-	Popup,
-	BottomSheet,
+	Mask,
 	Modal,
-	Dialog,
-	ActionSheet,
+	NavBar,
+	NoticeBar,
+	NumKeyboard,
+	Pagination,
 	Picker,
-	AsyncPicker,
+	Placeholder,
+	Popup,
+	Progress,
+	ProgressLoop,
+	Radio,
+	RadioGroup,
+	Rate,
+	Skeleton,
+	Slider,
+	Steps,
+	Switch,
+	Swiper,
+	Tab,
+	TabBar,
+	TabContent,
+	Tabs,
 	TimePicker,
-	Calendar,
-	Pagination,
-	NumKeyboard,
+	Toast,
 };

packages/stdf/components/indexBar/IndexBar.svelte

@@ -185,7 +185,7 @@
 		<div class={`flex-1 relative flex flex-col justify-center`}>
 			<div
 				class={`w-5 h-5 leading-5 text-center text-xs transition-all ${
-					current === i ? 'bg-primary dark:bg-dark text-white dark:text-gray1' : 'text-gray5 dark:text-gray7'
+					current === i ? 'bg-primary dark:bg-dark text-white dark:text-black' : 'text-gray-600 dark:text-gray-400'
 				} ${radiusObj[radius] || radiusObj.base}`}
 			>
 				{group.index}

packages/stdf/components/input/Input.svelte

@@ -163,7 +163,7 @@
 	// Input box style style
 	const inputStyleObj = {
 		block: 'px-2 ring-2 ring-transparent bg-black/5 dark:bg-white/5 ' + radiusObj[radius] || radiusObj.base,
-		line: 'px-1 border-b bg-transparent border-gray7 dark:border-gray5',
+		line: 'px-1 border-b bg-transparent border-gray-300 dark:border-gray-500',
 	};
 
 	// 状态样式
@@ -180,7 +180,7 @@
 	// Determine the input box style according to whether to get focus
 	$: inputStyleFocusObj = {
 		block: 'px-2 ring-2 bg-transparent ' + stateObj[state] || stateObj.theme + radiusObj[radius] || radiusObj.base,
-		line: 'px-1 border-b bg-transparent border-gray7 dark:border-gray5',
+		line: 'px-1 border-b bg-transparent border-gray-300 dark:border-gray-500',
 	};
 
 	// 线性动画样式
@@ -385,7 +385,7 @@
 			{/if}
 			<div class="flex flex-col grow">
 				{#if titlePosition === 'in'}
-					<div class="text-gray6 text-xs">{title}</div>
+					<div class="text-gray-400 text-xs">{title}</div>
 				{/if}
 				<div class="flex space-x-1">
 					<div class="w-full">
@@ -492,7 +492,7 @@
 			{:else if tip === 'slot'}
 				<slot name="tip">tip {commonLang.slotEmpty}</slot>
 			{:else}
-				<div class="text-sm text-gray6">
+				<div class="text-sm text-gray-400">
 					{tip}
 				</div>
 			{/if}

packages/stdf/components/numKeyboard/NumKeyboard.svelte

@@ -157,9 +157,9 @@
 	// Generate different basic styles based on type type
 	const baseClassFunc = key => {
 		if (type === 'button') {
-			return key === 'done' ? buttonClass : 'bg-white dark:bg-gray4 ' + buttonClass;
+			return key === 'done' ? buttonClass : 'bg-white dark:bg-gray-700 ' + buttonClass;
 		} else {
-			return key === 'done' ? blockClass : 'bg-white dark:bg-gray4 ' + blockClass;
+			return key === 'done' ? blockClass : 'bg-white dark:bg-gray-700 ' + blockClass;
 		}
 	};
 
@@ -217,7 +217,7 @@
 
 <Popup bind:visible size={0} mask={{ opacity: 0 }} transitionDistance={keyboardHeight()} {...popup}>
 	<div
-		class="bg-gray8 dark:bg-gray1 text-center {type === 'block' ? 'border-t border-gray8 dark:border-gray1' : ''} {pClass[p] ||
+		class="bg-gray-100 dark:bg-gray-950 text-center {type === 'block' ? 'border-t border-gray-100 dark:border-gray-950' : ''} {pClass[p] ||
 			'p-2'}{panelClass ? ' ' + panelClass : ''}"
 	>
 		<div class="grid {type === 'button' ? gapClass[gap] || 'gap-2' : 'gap-px'} {done ? 'grid-cols-4' : 'grid-cols-3'}">

packages/stdf/components/popup/Popup.svelte

@@ -330,7 +330,7 @@
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div
-				class={`w-full h-full${transparent ? ' bg-transparent' : ' bg-white dark:bg-gray1'} ${radiusFun()} overflow-y-auto`}
+				class={`w-full h-full${transparent ? ' bg-transparent' : ' bg-white dark:bg-gray-950'} ${radiusFun()} overflow-y-auto`}
 				class:popup-container={hideScrollbar}
 				on:click|stopPropagation
 			>

packages/stdf/components/progress/Progress.svelte

@@ -69,12 +69,12 @@
 
 <div class={`flex justify-between space-x-2 items-center`}>
 	<div
-		class={`relative w-full bg-black/5 dark:bg-white/5${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${
+		class={`relative w-full bg-black/10 dark:bg-white/20${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${
 			radiusClass[radius] || radiusClass['full']
 		}${trackInjClass === '' ? '' : ` ${trackInjClass}`}`}
 	>
 		<div
-			class={`${inactive ? 'bg-gray7 dark:bg-gray6' : 'bg-primary dark:bg-dark'} transition-all${
+			class={`${inactive ? 'bg-primary-300 dark:bg-dark-800' : 'bg-primary dark:bg-dark'} transition-all${
 				durationClass[duration] || durationClass['300']
 			}${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${radiusClass[radius] || radiusClass['full']}${
 				injClass === '' ? '' : ` ${injClass}`
@@ -98,7 +98,7 @@
 		{#if percentPosition === 'block'}
 			<div
 				class={`absolute top-1/2 ${
-					inactive ? ' bg-gray7 dark:bg-gray6' : ' bg-primary dark:bg-dark'
+					inactive ? ' bg-primary-300 dark:bg-dark-800' : ' bg-primary dark:bg-dark'
 				} py-0.5 px-1 text-xs text-white dark:text-black transition-all duration-300${
 					radiusClass[radius] || radiusClass['full']
 				} -translate-y-1/2 -translate-x-1/2${injClass === '' ? '' : ` ${injClass}`}`}

packages/stdf/components/rate/Rate.svelte

@@ -83,12 +83,12 @@
 	// 间距样式
 	// space style
 	const spaceObj = {
-		'0': ' space-x-0',
-		'1': ' space-x-1',
-		'2': ' space-x-2',
-		'3': ' space-x-3',
-		'4': ' space-x-4',
-		'8': ' space-x-8',
+		'0': ' gap-0',
+		'1': ' gap-1',
+		'2': ' gap-2',
+		'3': ' gap-3',
+		'4': ' gap-4',
+		'8': ' gap-8',
 	};
 
 	// 透明度样式
@@ -194,7 +194,7 @@
 	};
 </script>
 
-<div class={`inset-0 flex${spaceObj[space] || spaceObj['4']}${disabled ? ' opacity-50' : ''}`}>
+<div class={`inset-0 inline-flex flex-wrap${spaceObj[space] || spaceObj['4']}${disabled ? ' opacity-50' : ''}`}>
 	<!-- eslint-disable-next-line no-unused-vars -->
 	{#each new Array(Math.floor(total)) as item, index}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->

packages/stdf/components/skeleton/Skeleton.svelte

@@ -78,17 +78,17 @@
 		<div class="flex flex-col space-y-2">
 			<!-- eslint-disable-next-line no-unused-vars -->
 			{#each new Array(lines - 1) as item}
-				<div class={`bg-gray7 dark:bg-gray6 w-full${heightObj[height] || heightObj['6']}${radiusObj[radius] || radiusObj.base}`} />
+				<div class={`bg-black/20 dark:bg-white/20 w-full${heightObj[height] || heightObj['6']}${radiusObj[radius] || radiusObj.base}`} />
 			{/each}
 			<div
-				class={`bg-gray7 dark:bg-gray6 ${randomArr[Math.floor(Math.random() * randomArr.length)]}${heightObj[height] || heightObj['6']}${
-					radiusObj[radius] || radiusObj.base
-				}`}
+				class={`bg-black/20 dark:bg-white/20 ${randomArr[Math.floor(Math.random() * randomArr.length)]}${
+					heightObj[height] || heightObj['6']
+				}${radiusObj[radius] || radiusObj.base}`}
 			/>
 		</div>
 	{:else}
 		<div
-			class={`bg-gray7 dark:bg-gray6${widthObj[width] || widthObj.full}${heightObj[height] || heightObj['6']}${
+			class={`bg-black/20 dark:bg-white/20${widthObj[width] || widthObj.full}${heightObj[height] || heightObj['6']}${
 				radiusObj[radius] || radiusObj.base
 			} flex flex-col justify-center`}
 		>

packages/stdf/components/slider/Slider.svelte

@@ -193,7 +193,7 @@
 		{#if useSlot}
 			<slot />
 		{:else}
-			<div class={`w-full h-1 bg-black/5 dark:bg-white/5${radiusObj[radius] || radiusObj['full']}`}>
+			<div class={`w-full h-1 bg-black/10 dark:bg-white/20${radiusObj[radius] || radiusObj['full']}`}>
 				{#if isRange}
 					<div
 						class={`bg-primary dark:bg-dark h-1${radiusObj[radius] || radiusObj['full']}`}
@@ -210,7 +210,7 @@
 			<div
 				class={`${
 					lineBlock
-						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
+						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
 						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
 				}${radiusObj[radius] || radiusObj['full']}`}
 				style={`transform: translateX(calc(${currentStartX}px - 50%));`}
@@ -237,7 +237,7 @@
 			<div
 				class={`${
 					lineBlock
-						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
+						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
 						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
 				}${radiusObj[radius] || radiusObj['full']}`}
 				style={`transform: translateX(calc(${currentEndX}px - 50%));`}
@@ -266,7 +266,7 @@
 			<div
 				class={`${
 					lineBlock
-						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
+						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-black'
 						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
 				}${radiusObj[radius] || radiusObj['full']}`}
 				style={`transform: translateX(calc(${currentX}px - 50%));`}

packages/stdf/components/steps/Steps.svelte

@@ -45,7 +45,7 @@
 								i < current - 1
 									? 'border-primary dark:border-dark text-primary dark:text-dark'
 									: i === current - 1
-									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-gray1'
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
 									: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
 							} ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
 							style="top:12px"
@@ -94,7 +94,7 @@
 					<div
 						class={`font-medium transition-all duration-300 ${
 							i < current - 1
-								? 'text-gray1 dark:text-white'
+								? 'text-black dark:text-white'
 								: i === current - 1
 								? 'text-primary dark:text-dark'
 								: 'text-black/30 dark:text-white/30'
@@ -103,7 +103,7 @@
 						{item.finishStep && i < current - 1 ? item.finishStep.title : item.step.title}
 					</div>
 					{#if item.step.desc || item.finishStep?.desc}
-						<div class={`text-xs transition-all duration-300 ${i <= current - 1 ? 'text-gray6' : 'text-black/30 dark:text-white/30'}`}>
+						<div class={`text-xs transition-all duration-300${i <= current - 1 ? '' : ' text-black/30 dark:text-white/30'}`}>
 							{item.finishStep && i < current - 1
 								? item.finishStep.desc
 									? item.finishStep.desc
@@ -135,7 +135,7 @@
 								i < current - 1
 									? 'border-primary dark:border-dark text-primary dark:text-dark'
 									: i === current - 1
-									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-gray1'
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-black'
 									: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
 							} ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
 							style="left:calc(50% - 15px)"
@@ -183,7 +183,7 @@
 				<div
 					class={`text-center text-sm font-medium transition-all duration-300 ${
 						i < current - 1
-							? 'text-gray1 dark:text-white'
+							? 'text-black dark:text-white'
 							: i === current - 1
 							? 'text-primary dark:text-dark'
 							: 'text-black/30 dark:text-white/30'

packages/stdf/components/switch/Switch.svelte

@@ -39,21 +39,19 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	on:click={setChangeFun}
-	class={`flex justify-around w-12 h-6 relative transition-all duration-500 active:opacity-80 ${
-		check ? `bg-primary dark:bg-dark ${injClass}` : 'bg-black/10 dark:bg-white/10'
-	} ${radiusObj[radius] || radiusObj.base} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+	class="flex justify-around w-12 h-6 relative transition-all duration-500 active:opacity-80 {radiusObj[radius] || radiusObj.base} {check
+		? `bg-primary dark:bg-dark ${injClass}`
+		: 'bg-black/10 dark:bg-white/20'} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
 >
 	<div
-		class={`bg-white dark:bg-gray2 absolute top-[2px] left-[2px] transition-all duration-300 text-xs text-center text-gray6 ${
-			radiusObj[radius] || radiusObj.base
-		}`}
-		style="height:calc(1.5rem - 4px);width:calc(1.5rem - 4px);line-height:calc(1.5rem - 4px);left: {check
-			? 'calc(1.5rem + 2px)'
-			: '2px'};transform:scaleX({isLong ? '1.3' : '1'});})"
+		class="bg-white dark:bg-black absolute w-5 h-5 leading-5 top-0.5 transition-all duration-300 text-xs text-center text-black/80 dark:text-white/90 {radiusObj[
+			radius
+		] || radiusObj.base}"
+		style="left:{check ? '1.625rem' : '0.125rem'};transform:{isLong ? 'scaleX(1.3)' : 'scaleX(1)'}"
 	>
 		{#if inside === 'state'}
-			<span class:hidden={!check}><div class="bg-gray6 w-1 h-3 mt-1 ml-2 rounded-full" /></span>
-			<span class:hidden={check}><div class="w-3 h-3 mt-1 ml-1 border-2 border-gray6 rounded-full" /></span>
+			<span class:hidden={!check}><div class="bg-black/80 dark:bg-white/90 w-1 h-3 mt-1 ml-2 rounded-full" /></span>
+			<span class:hidden={check}><div class="w-3 h-3 mt-1 ml-1 border-2 border-black/80 dark:border-white/90 rounded-full" /></span>
 		{:else if inside === 'loading'}
 			<div class="m-0.5">
 				<Loading {...loading} width="full" height="full" />

packages/stdf/components/tabBar/TabBar.svelte

@@ -25,7 +25,7 @@
 	$: activeLeft = active * (tabW / labels.length) + tabW / labels.length / 2 - activeW / 2;
 </script>
 
-<div bind:clientWidth={tabW} class={`bg-white dark:bg-gray1 relative ${injClass}`} style="padding-bottom: env(safe-area-inset-bottom);">
+<div bind:clientWidth={tabW} class={`bg-white dark:bg-gray-800 relative ${injClass}`} style="padding-bottom: env(safe-area-inset-bottom);">
 	{#if line}
 		<div
 			class={`mx-auto rounded-full h-[2px] absolute transition-all bottom-px bg-primary dark:bg-dark ${activeInjClass}`}
@@ -41,7 +41,7 @@
 			<div
 				on:click={() => clickFun(i)}
 				class={`flex-1 flex flex-col justify-center text-center py-1 active:opacity-80 cursor-pointer ${
-					i === active ? 'text-primary dark:text-dark' : 'text-gray6'
+					i === active ? 'text-primary dark:text-dark' : 'text-black/80 dark:text-white/90'
 				} ${love ? 'text-lg' : 'text-sm'} ${tabInjClass} ${i === active && activeTabInjClass}`}
 			>
 				{#if label.icon}

packages/stdf/components/tabs/Tab.svelte

@@ -58,7 +58,7 @@
 <div
 	bind:clientWidth={tabW}
 	bind:clientHeight={tabH}
-	class={`${lineType && layout !== 'v' ? '' : 'bg-black/5 dark:bg-white/5'} p-[2px] relative ${radiusObj[radius] || radiusObj.base}${
+	class={`${lineType && layout !== 'v' ? '' : 'bg-black/5 dark:bg-white/10'} p-[2px] relative ${radiusObj[radius] || radiusObj.base}${
 		mxClass[mx] || mxClass['4']
 	} ${injClass}`}
 >
@@ -69,7 +69,7 @@
 		class={` ${lineType && layout !== 'v' ? '' : 'shadow dark:shadow-sm dark:shadow-white/10'} absolute transition-all ${
 			durationObj[duration] || durationObj.base
 		} ${radiusObj[radius] || radiusObj.base} ${
-			lineType && layout !== 'v' ? 'bottom-0 bg-gray1 dark:bg-gray9' : 'bg-white dark:bg-gray1'
+			lineType && layout !== 'v' ? 'bottom-0 bg-black/50 dark:bg-white/50' : 'bg-white dark:bg-gray-950'
 		} ${activeInjClass}`}
 		style="width:{activeW}px;height:{lineType && layout !== 'v' ? 2 : activeH}px;left:{activeLeft}px;top:{activeTop}px"
 	/>

packages/stdf/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"main": "./components/index.js",
 	"svelte": "./components/index.js",

packages/stdf/theme/darkMode.js

@@ -0,0 +1,14 @@
+/**
+ * 给 HTML 元素增加或删除 dark 类名，实现 Mode 切换
+ * Add or remove the dark class name to the HTML element to implement Mode switching
+ * @param {boolean} isDark 是否为 dark 模式
+ * @returns {void}
+ * @example
+ */
+export default (isDark = true) => {
+	if (isDark) {
+		document.documentElement.classList.add('dark');
+	} else {
+		document.documentElement.classList.remove('dark');
+	}
+};

packages/stdf/theme/index.js

@@ -0,0 +1,5 @@
+import darkMode from './darkMode';
+import switchTheme from './switchTheme';
+import stdfTheme from './stdf';
+
+export { darkMode, switchTheme, stdfTheme };

packages/stdf/theme/stdf.js

@@ -0,0 +1,46 @@
+export default {
+	name: 'STDF',
+	color: {
+		primary: {
+			50: '245, 248, 255',
+			100: '232, 238, 255',
+			200: '187, 203, 254',
+			300: '143, 165, 253',
+			400: '99, 124, 253',
+			500: '55, 81, 252',
+			default: '11, 36, 251',
+			700: '7, 20, 207',
+			800: '4, 9, 164',
+			900: '1, 1, 120',
+			950: '3, 0, 77',
+		},
+		dark: {
+			50: '255, 254, 245',
+			100: '255, 251, 232',
+			200: '255, 244, 199',
+			300: '255, 234, 166',
+			400: '255, 222, 133',
+			500: '255, 209, 100',
+			default: '255, 192, 67',
+			700: '210, 148, 41',
+			800: '166, 108, 22',
+			900: '121, 72, 8',
+			950: '77, 41, 0',
+		},
+		primaryBlack: '1, 3, 25',
+		primaryWhite: '242, 242, 243',
+		darkBlack: '25, 17, 1',
+		darkWhite: '243, 242, 242',
+		functional: {
+			success: '17, 187, 141',
+			warning: '185, 80, 0',
+			error: '218, 20, 20',
+			info: '46, 90, 172',
+		},
+		extend: [
+			{ color: '0, 172, 238', alias: 'Twitter' },
+			{ color: '255, 105, 55', alias: 'Svelte' },
+			{ color: '0, 112, 74', alias: 'Starbucks' },
+		],
+	},
+};

packages/stdf/theme/switchTheme.js

@@ -0,0 +1,59 @@
+/**
+ * 传入 hex 格式的颜色值，返回 rgb '255, 255, 255' 格式的字符串
+ * Pass in the color value of hex format and return the string of rgb '255, 255, 255' format
+ * @param {string} hex
+ * @returns {string}
+ */
+const hexToRgb = hex => {
+	if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(hex)) {
+		return hex;
+	}
+	hex = hex.replace('#', '');
+	var r = parseInt(hex.substring(0, 2), 16);
+	var g = parseInt(hex.substring(2, 4), 16);
+	var b = parseInt(hex.substring(4, 6), 16);
+	return r + ', ' + g + ', ' + b;
+};
+
+/**
+ * 给 HTML 元素设置 CSS 变量，用于切换主题
+ * Let the HTML element set the CSS variable for switching themes
+ * @param {string} name 变量名
+ * @param {string} value 变量值
+ * @returns {void}
+ * @example
+ * setPropertyFunc('--theme-primary', '#000000');
+ */
+const setPropertyFunc = (name, value) => {
+	// 防止传入的是 hex 格式，做一下处理 hexToRgb
+	// Prevent passing in hex format and do some processing hexToRgb
+	document.documentElement.style.setProperty(name, hexToRgb(value));
+};
+
+/**
+ * 切换主题
+ * Switch theme
+ * @param {object} theme 主题对象，格式请参考 https://stdf.design/#/guide?nav=theme
+ * @returns {void}
+ * @example
+ */
+export default theme => {
+	const { color } = theme;
+	for (const [key, value] of Object.entries(color.primary)) {
+		setPropertyFunc(key === 'default' ? '--theme-color-primary' : `--theme-color-primary-${key}`, value);
+	}
+	for (const [key, value] of Object.entries(color.dark)) {
+		setPropertyFunc(key === 'default' ? '--theme-color-dark' : `--theme-color-dark-${key}`, value);
+	}
+	setPropertyFunc('--theme-color-functional-success', color.functional.success);
+	setPropertyFunc('--theme-color-functional-warning', color.functional.warning);
+	setPropertyFunc('--theme-color-functional-error', color.functional.error);
+	setPropertyFunc('--theme-color-functional-info', color.functional.info);
+	setPropertyFunc('--theme-color-primaryBlack', color.primaryBlack);
+	setPropertyFunc('--theme-color-primaryWhite', color.primaryWhite);
+	setPropertyFunc('--theme-color-darkBlack', color.darkBlack);
+	setPropertyFunc('--theme-color-darkWhite', color.darkWhite);
+	color.extend.forEach((item, i) => {
+		setPropertyFunc(`--theme-color-extend${i}`, item.color);
+	});
+};