[stdf]Add color support for different types of Toast.

docs/mds/components/toast/guide.md

@@ -22,7 +22,7 @@ transitionParams 具体支持的参数请参考 [svelte/transition](https://svel
 
 ## type
 
-Toast 内部通过 `type` 属性为 'success'/'error'/'warning'/'info' 四种情况设置了对应的图标，也可以传入 `'loading'` 和 `'icon'` 配合 loading 与 icon 自定义对应的显示内容，传 `null` 不显示。请参考示例。
+Toast 内部通过 `type` 属性为 `'success'|'error'|'warning'|'info'` 四种情况设置了对应的图标，图标颜色跟随[颜色系统](https://stdf.design/guide/color)中的功能色，也可以传入 `'loading'` 和 `'icon'` 配合 loading 与 icon 自定义对应的显示内容，传 `null` 不显示。请参考示例。
 
 ## Snippet
 

docs/mds/components/toast/guide_en.md

@@ -22,7 +22,7 @@ Note: Since there is an entry animation duration (default 300ms or custom value)
 
 ## type
 
-Toast internally sets corresponding icons for four types: 'success'/'error'/'warning'/'info' through the `type` prop. You can also pass `'loading'` and `'icon'` to customize display content with loading and icon components, or pass `null` to display no icon. Please refer to examples.
+Toast internally sets corresponding icons for four types: `'success'|'error'|'warning'|'info'` through the `type` prop, and the icon color follows the functional color in the [Color System](https://stdf.design/guide/color). You can also pass `'loading'` and `'icon'` to customize display content with loading and icon components, or pass `null` to display no icon. Please refer to examples.
 
 ## Snippet
 

packages/stdf/src/lib/components/toast/Toast.svelte

@@ -52,6 +52,7 @@
 		xl: ' rounded-xl',
 		'2xl': ' rounded-2xl'
 	};
+	const typeColor = { success: 'text-success', error: 'text-error', warning: 'text-warning', info: 'text-info' };
 
 	//解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
 	// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
@@ -104,7 +105,7 @@
 								{:else if type === 'icon'}
 									<Icon size={30} {...icon} />
 								{:else if type === 'success' || type === 'error' || type === 'warning' || type === 'info'}
-									<Icon name={`ri-${typeObj[type]}-line`} size={30} {...icon} />
+									<Icon name={`ri-${typeObj[type]}-line`} injClass={typeColor[type]} size={30} {...icon} />
 								{:else}{/if}
 							</div>
 						{/if}