Parcourir la source

[stdf]Add theme types

dufu1991 il y a 1 an
Parent
commit
a6ef51db62

+ 11 - 7
packages/stdf/src/data/themes/AzurePink.js → packages/stdf/src/data/themes/azurePink.ts

@@ -1,4 +1,6 @@
-export default {
+import type { ThemeProps } from '../../lib/theme/types.js';
+
+const AzurePink: ThemeProps = {
 	name: 'AzurePink',
 	color: {
 		primary: {
@@ -12,7 +14,7 @@ export default {
 			700: '8, 8, 143', // #08088F
 			800: '9, 5, 121', // #090579
 			900: '8, 2, 99', // #080263
-			950: '8, 0, 77', // #08004D
+			950: '8, 0, 77' // #08004D
 		},
 		dark: {
 			50: '255, 245, 248', // #FFF5F8
@@ -25,7 +27,7 @@ export default {
 			700: '195, 21, 117', // #C31575
 			800: '156, 11, 95', // #9C0B5F
 			900: '116, 4, 73', // #740449
-			950: '77, 0, 50', // #4D0032
+			950: '77, 0, 50' // #4D0032
 		},
 		primaryBlack: '1, 1, 25', // #010119
 		primaryWhite: '242, 242, 243', // #F2F2F3
@@ -35,12 +37,14 @@ export default {
 			success: '43, 164, 23', // #2ba417
 			warning: '227, 115, 24', // #e37318
 			error: '213, 73, 65', // #d54941
-			info: '0, 82, 217', // #0052d9
+			info: '0, 82, 217' // #0052d9
 		},
 		extend: [
 			{ color: '20, 40, 160', alias: 'Samsung' }, // #1428A0
 			{ color: '253, 73, 0', alias: 'Xiaomi' }, // #fd4900
-			{ color: '4, 106, 56', alias: 'OPPO' }, // ##046a38
-		],
-	},
+			{ color: '4, 106, 56', alias: 'OPPO' } // ##046a38
+		]
+	}
 };
+
+export default AzurePink;

+ 11 - 7
packages/stdf/src/data/themes/CamelliaRed.js → packages/stdf/src/data/themes/camelliaRed.ts

@@ -1,4 +1,6 @@
-export default {
+import type { ThemeProps } from '../../lib/theme/types.js';
+
+const CamelliaRed: ThemeProps = {
 	name: 'CamelliaRed',
 	color: {
 		primary: {
@@ -12,7 +14,7 @@ export default {
 			700: '198, 39, 58', // #C6273A
 			800: '157, 21, 41', // #9D1529
 			900: '117, 8, 28', // #75081C
-			950: '77, 0, 17', // #4D0011
+			950: '77, 0, 17' // #4D0011
 		},
 		dark: {
 			50: '254, 250, 255', // #FEFAFF
@@ -25,7 +27,7 @@ export default {
 			700: '164, 88, 210', // #A458D2
 			800: '116, 46, 166', // #742EA6
 			900: '74, 17, 121', // #4A1179
-			950: '40, 0, 77', // #28004D
+			950: '40, 0, 77' // #28004D
 		},
 		primaryBlack: '25, 1, 3', // #190103
 		primaryWhite: '243, 242, 242', // #F3F2F2
@@ -35,12 +37,14 @@ export default {
 			success: '82, 196, 26', // #52c41a
 			warning: '250, 173, 20', // #faad14
 			error: '255, 77, 79', // #ff4d4f
-			info: '22, 119, 255', // #1677ff
+			info: '22, 119, 255' // #1677ff
 		},
 		extend: [
 			{ color: '59, 89, 152', alias: 'Facebook' }, // #3b5998
 			{ color: '237, 28, 22', alias: 'CocaCola' }, // #ed1c16
-			{ color: '0, 104, 181', alias: 'Intel' }, // #0068b5
-		],
-	},
+			{ color: '0, 104, 181', alias: 'Intel' } // #0068b5
+		]
+	}
 };
+
+export default CamelliaRed;

+ 11 - 7
packages/stdf/src/data/themes/chameleon.js → packages/stdf/src/data/themes/chameleon.ts

@@ -1,4 +1,6 @@
-export default {
+import type { ThemeProps } from '../../lib/theme/types.js';
+
+const Chameleon: ThemeProps = {
 	name: 'Chameleon',
 	color: {
 		primary: {
@@ -12,7 +14,7 @@ export default {
 			700: '1, 141, 73', // #018D49
 			800: '1, 119, 66', // #017742
 			900: '0, 98, 57', // #006239
-			950: '0, 77, 47', // #004D2F
+			950: '0, 77, 47' // #004D2F
 		},
 		dark: {
 			50: '255, 245, 252', // #FFF5FC
@@ -25,7 +27,7 @@ export default {
 			700: '193, 64, 189', // #C140BD
 			800: '154, 34, 154', // #9A229A
 			900: '112, 13, 115', // #700D73
-			950: '71, 0, 77', // #47004D
+			950: '71, 0, 77' // #47004D
 		},
 		primaryBlack: '1, 25, 12', // #01190C
 		primaryWhite: '242, 243, 242', // #F2F3F2
@@ -35,12 +37,14 @@ export default {
 			success: '103, 194, 58', // #67c23a
 			warning: '230, 162, 60', // #e6a23c
 			error: '245, 108, 108', // #f56c6c
-			info: '144, 147, 153', // #909399
+			info: '144, 147, 153' // #909399
 		},
 		extend: [
 			{ color: '56, 189, 248', alias: 'Tailwind' }, // #38bdf8
 			{ color: '194, 12, 12', alias: 'NetEaseCloudMusic' }, // #c20c0c
-			{ color: '65, 95, 255', alias: 'vivo' }, // #415fff
-		],
-	},
+			{ color: '65, 95, 255', alias: 'vivo' } // #415fff
+		]
+	}
 };
+
+export default Chameleon;

+ 9 - 9
packages/stdf/src/data/themes/index.ts

@@ -1,10 +1,10 @@
-import { stdfTheme, type ThemeProps } from '$lib/theme/index.js';
-import chameleonTheme from './chameleon.js';
-import AzurePink from './AzurePink.js';
-import SmartLive from './SmartLive.js';
-import CamelliaRed from './CamelliaRed.js';
-import Nintendo from './Nintendo.js';
-
+import { STDFTheme } from '../../lib/theme/index.js';
+import Chameleon from './chameleon.js';
+import AzurePink from './azurePink.js';
+import SmartLive from './smartLive.js';
+import CamelliaRed from './camelliaRed.js';
+import Nintendo from './nintendo.js';
+import type { ThemeProps } from '../../lib/theme/types.js';
 /**
  * 传入 rgb 格式 255, 255, 255 的颜色值,返回 hex 格式的颜色值
  * Pass in the color value of rgb format 255, 255, 255 and return the color value of hex format
@@ -70,10 +70,10 @@ const rgbToHexFunc = (theme: ThemeProps) => {
 };
 
 export default [
-	{ name_CN: 'STDF', name: stdfTheme.name, theme: rgbToHexFunc(stdfTheme) },
+	{ name_CN: 'STDF', name: STDFTheme.name, theme: rgbToHexFunc(STDFTheme) },
 	{ name_CN: '任天堂', name: Nintendo.name, theme: rgbToHexFunc(Nintendo) },
 	{ name_CN: '蔚蓝粉', name: AzurePink.name, theme: rgbToHexFunc(AzurePink) },
-	{ name_CN: '变色龙', name: chameleonTheme.name, theme: rgbToHexFunc(chameleonTheme) },
+	{ name_CN: '变色龙', name: Chameleon.name, theme: rgbToHexFunc(Chameleon) },
 	{ name_CN: '慧活力', name: SmartLive.name, theme: rgbToHexFunc(SmartLive) },
 	{ name_CN: '山茶红', name: CamelliaRed.name, theme: rgbToHexFunc(CamelliaRed) }
 ];

+ 11 - 7
packages/stdf/src/data/themes/Nintendo.js → packages/stdf/src/data/themes/nintendo.ts

@@ -1,4 +1,6 @@
-export default {
+import type { ThemeProps } from '../../lib/theme/types.js';
+
+const Nintendo: ThemeProps = {
 	name: 'Nintendo',
 	color: {
 		primary: {
@@ -12,7 +14,7 @@ export default {
 			700: '192, 0, 22', // #C00016
 			800: '153, 0, 23', // #990017
 			900: '115, 0, 21', // #730015
-			950: '77, 0, 17', // #4D0011
+			950: '77, 0, 17' // #4D0011
 		},
 		dark: {
 			50: '245, 255, 254', // #F5FFFE
@@ -25,7 +27,7 @@ export default {
 			700: '0, 158, 189', // #009EBD
 			800: '0, 121, 152', // #007998
 			900: '0, 87, 114', // #005772
-			950: '0, 56, 77', // #00384D
+			950: '0, 56, 77' // #00384D
 		},
 		primaryBlack: '25, 1, 3', // #190103
 		primaryWhite: '243, 242, 242', // #F3F2F2
@@ -35,12 +37,14 @@ export default {
 			success: '0, 180, 42', // #00b42a
 			warning: '255, 125, 0', // #ff7d00
 			error: '245, 63, 63', // #f53f3f
-			info: '22, 93, 255', // #165dff
+			info: '22, 93, 255' // #165dff
 		},
 		extend: [
 			{ color: '0, 82, 217', alias: 'Tencent' }, // #0052d9
 			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
-			{ color: '243, 112, 33', alias: 'Hermès' }, // #f37021
-		],
-	},
+			{ color: '243, 112, 33', alias: 'Hermès' } // #f37021
+		]
+	}
 };
+
+export default Nintendo;

+ 11 - 7
packages/stdf/src/data/themes/SmartLive.js → packages/stdf/src/data/themes/smartLive.ts

@@ -1,4 +1,6 @@
-export default {
+import type { ThemeProps } from '../../lib/theme/types.js';
+
+const SmartLive: ThemeProps = {
 	name: 'SmartLive',
 	color: {
 		primary: {
@@ -12,7 +14,7 @@ export default {
 			700: '52, 19, 87', // #341357
 			800: '44, 12, 84', // #2C0C54
 			900: '37, 6, 80', // #250650
-			950: '29, 0, 77', // #1D004D
+			950: '29, 0, 77' // #1D004D
 		},
 		dark: {
 			50: '253, 255, 245', // #FDFFF5
@@ -25,7 +27,7 @@ export default {
 			700: '210, 197, 45', // #D2C52D
 			800: '166, 149, 23', // #A69517
 			900: '121, 104, 9', // #796809
-			950: '77, 62, 0', // #4D3E00
+			950: '77, 62, 0' // #4D3E00
 		},
 		primaryBlack: '13, 1, 25', // #0D0119
 		primaryWhite: '242, 242, 243', // #F2F2F3
@@ -35,12 +37,14 @@ export default {
 			success: '21, 91, 54', // #155b36
 			warning: '208, 126, 11', // #d07e0b
 			error: '218, 20, 20', // #da1414
-			info: '99, 176, 227', // #63b0e3
+			info: '99, 176, 227' // #63b0e3
 		},
 		extend: [
 			{ color: '118, 185, 0', alias: 'NVIDIA' }, // #76b900
 			{ color: '251, 114, 153', alias: 'bilibili' }, // #fb7299
-			{ color: '22, 119, 255', alias: 'AliPay' }, // #1677ff
-		],
-	},
+			{ color: '22, 119, 255', alias: 'AliPay' } // #1677ff
+		]
+	}
 };
+
+export default SmartLive;

+ 2 - 2
packages/stdf/src/lib/theme/index.ts

@@ -1,6 +1,6 @@
 import darkMode from './darkMode.js';
 import switchTheme from './switchTheme.js';
-import stdfTheme from './stdf.js';
+import STDFTheme from './stdf.js';
 import type { ThemeProps } from './types.js';
 
-export { darkMode, switchTheme, stdfTheme, type ThemeProps };
+export { darkMode, switchTheme, STDFTheme, type ThemeProps };

+ 2 - 2
packages/stdf/src/lib/theme/stdf.ts

@@ -1,6 +1,6 @@
 import type { ThemeProps } from './types.js';
 
-const stdfTheme: ThemeProps = {
+const STDFTheme: ThemeProps = {
 	name: 'STDF',
 	color: {
 		primary: {
@@ -47,4 +47,4 @@ const stdfTheme: ThemeProps = {
 	}
 };
 
-export default stdfTheme;
+export default STDFTheme;

+ 3 - 1
packages/stdf/src/lib/theme/switchTheme.ts

@@ -36,7 +36,7 @@ const setPropertyFunc: (name: string, value: string) => void = (name, value) =>
  * import { stdfTheme } from 'stdf/theme';
  * switchTheme(stdfTheme);
  */
-export default (theme: ThemeProps): void => {
+const switchTheme = (theme: ThemeProps): void => {
 	const { color } = theme;
 	for (const [key, value] of Object.entries(color.primary)) {
 		setPropertyFunc(key === 'default' ? '--theme-color-primary' : `--theme-color-primary-${key}`, value);
@@ -60,3 +60,5 @@ export default (theme: ThemeProps): void => {
 		});
 	}
 };
+
+export default switchTheme;