npm - @univerjs/themes - Versions diffs - 0.25.0 → 1.0.0-alpha.0 - Mend

@univerjs/themes 0.25.0 → 1.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/lib/es/index.js CHANGED Viewed

@@ -162,7 +162,73 @@ const defaultTheme = {
 		10: "red.300",
 		11: "green.600",
 		12: "yellow.700"
-	}
+	},
+	highlight: { background: {
+		1: {
+			color: "purple.500",
+			alpha: .3
+		},
+		2: {
+			color: "red.500",
+			alpha: .3
+		},
+		3: {
+			color: "orange.400",
+			alpha: .3
+		},
+		4: {
+			color: "green.400",
+			alpha: .3
+		},
+		5: {
+			color: "blue.500",
+			alpha: .3
+		},
+		6: {
+			color: "primary.500",
+			alpha: .3
+		},
+		7: {
+			color: "pink.500",
+			alpha: .3
+		},
+		8: {
+			color: "gray.400",
+			alpha: .3
+		},
+		9: {
+			color: "purple.500",
+			alpha: .15
+		},
+		10: {
+			color: "red.500",
+			alpha: .15
+		},
+		11: {
+			color: "orange.400",
+			alpha: .15
+		},
+		12: {
+			color: "green.400",
+			alpha: .15
+		},
+		13: {
+			color: "blue.500",
+			alpha: .15
+		},
+		14: {
+			color: "primary.500",
+			alpha: .15
+		},
+		15: {
+			color: "pink.500",
+			alpha: .15
+		},
+		16: {
+			color: "gray.400",
+			alpha: .15
+		}
+	} }
 };
 //#endregion
@@ -171,152 +237,875 @@ const greenTheme = {
 	white: "#FFFFFF",
 	black: "#000000",
 	primary: {
-		50: "#F3FAF7",
-		100: "#DEF7EC",
-		200: "#BCF0DA",
-		300: "#84E1BC",
-		400: "#31C48D",
-		500: "#0DA471",
-		600: "#057A55",
-		700: "#046C4E",
-		800: "#03543F",
-		900: "#014737"
+		50: "#ECFDF5",
+		100: "#D1FAE5",
+		200: "#A7F3D0",
+		300: "#6EE7B7",
+		400: "#34D399",
+		500: "#10B981",
+		600: "#047857",
+		700: "#065F46",
+		800: "#064E3B",
+		900: "#022C22"
 	},
 	gray: {
-		50: "#F9FAFB",
-		100: "#EEEFF1",
-		200: "#E3E5EA",
-		300: "#A8B0BD",
-		400: "#7D8698",
-		500: "#4E5565",
-		600: "#31363F",
-		700: "#272A2F",
-		800: "#1F2124",
-		900: "#1B1C1F"
+		50: "#F8FAF9",
+		100: "#EEF4F1",
+		200: "#DDE8E2",
+		300: "#B7C7BF",
+		400: "#82968C",
+		500: "#60736A",
+		600: "#46584F",
+		700: "#33443B",
+		800: "#25332D",
+		900: "#1A2621"
 	},
 	blue: {
-		50: "#EBF5FF",
-		100: "#E1EFFE",
-		200: "#C3DDFD",
-		300: "#A4CAFE",
-		400: "#76A9FA",
-		500: "#3F83F8",
-		600: "#1C64F2",
-		700: "#1A56DB",
-		800: "#1E429F",
-		900: "#233876"
+		50: "#F0F9FF",
+		100: "#E0F2FE",
+		200: "#BAE6FD",
+		300: "#7DD3FC",
+		400: "#38BDF8",
+		500: "#0EA5E9",
+		600: "#0284C7",
+		700: "#0369A1",
+		800: "#075985",
+		900: "#0C4A6E"
 	},
 	red: {
-		50: "#FDF2F2",
-		100: "#FDE8E8",
-		200: "#FBD5D5",
-		300: "#F8B4B4",
-		400: "#F98080",
-		500: "#F05252",
-		600: "#E02424",
-		700: "#C81E1E",
-		800: "#9B1C1C",
-		900: "#771D1D"
+		50: "#FFF1F2",
+		100: "#FFE4E6",
+		200: "#FECDD3",
+		300: "#FDA4AF",
+		400: "#FB7185",
+		500: "#F43F5E",
+		600: "#E11D48",
+		700: "#BE123C",
+		800: "#9F1239",
+		900: "#881337"
 	},
 	orange: {
-		50: "#FFF8F1",
-		100: "#FEECDC",
-		200: "#FCD9BD",
-		300: "#FDBA8C",
-		400: "#FF8A4C",
-		500: "#FF5A1F",
-		600: "#D03801",
-		700: "#B43403",
-		800: "#8A2C0D",
-		900: "#771D1D"
+		50: "#FFF7ED",
+		100: "#FFEDD5",
+		200: "#FED7AA",
+		300: "#FDBA74",
+		400: "#FB923C",
+		500: "#F97316",
+		600: "#EA580C",
+		700: "#C2410C",
+		800: "#9A3412",
+		900: "#7C2D12"
 	},
 	yellow: {
-		50: "#FDFCEA",
-		100: "#FFF4B9",
-		200: "#FCDC6A",
-		300: "#FAC815",
-		400: "#F1B312",
-		500: "#D49D0F",
-		600: "#AB7F0E",
-		700: "#9A6D15",
-		800: "#725213",
-		900: "#634312"
+		50: "#FEFCE8",
+		100: "#FEF9C3",
+		200: "#FEF08A",
+		300: "#FDE047",
+		400: "#FACC15",
+		500: "#EAB308",
+		600: "#CA8A04",
+		700: "#A16207",
+		800: "#854D0E",
+		900: "#713F12"
 	},
 	green: {
-		50: "#F3FAF7",
-		100: "#DEF7EC",
-		200: "#BCF0DA",
-		300: "#84E1BC",
-		400: "#31C48D",
-		500: "#0DA471",
-		600: "#057A55",
-		700: "#046C4E",
-		800: "#03543F",
-		900: "#014737"
+		50: "#F0FDF4",
+		100: "#DCFCE7",
+		200: "#BBF7D0",
+		300: "#86EFAC",
+		400: "#4ADE80",
+		500: "#22C55E",
+		600: "#16A34A",
+		700: "#15803D",
+		800: "#166534",
+		900: "#14532D"
 	},
 	jiqing: {
-		50: "#EDFAFA",
-		100: "#D5F5F6",
-		200: "#AFECEF",
-		300: "#7EDCE2",
-		400: "#16BDCA",
-		500: "#0694A2",
-		600: "#047481",
-		700: "#036672",
-		800: "#05505C",
-		900: "#014451"
+		50: "#ECFEFF",
+		100: "#CFFAFE",
+		200: "#A5F3FC",
+		300: "#67E8F9",
+		400: "#22D3EE",
+		500: "#06B6D4",
+		600: "#0891B2",
+		700: "#0E7490",
+		800: "#155E75",
+		900: "#164E63"
 	},
 	indigo: {
-		50: "#F3F5FF",
-		100: "#E9EDFF",
-		200: "#D2DAFA",
-		300: "#BAC6F8",
-		400: "#6280F9",
-		500: "#466AF7",
-		600: "#2C53F1",
-		700: "#143EE3",
-		800: "#083AD1",
-		900: "#1033BF"
+		50: "#F0FDF9",
+		100: "#CCFBF1",
+		200: "#99F6E4",
+		300: "#5EEAD4",
+		400: "#2DD4BF",
+		500: "#14B8A6",
+		600: "#0D9488",
+		700: "#0F766E",
+		800: "#115E59",
+		900: "#134E4A"
 	},
 	purple: {
-		50: "#F6F5FF",
-		100: "#EDEBFE",
-		200: "#DCD7FE",
-		300: "#CABFFD",
-		400: "#AC94FA",
-		500: "#9061F9",
-		600: "#7E3AF2",
-		700: "#6C2BD9",
-		800: "#5521B5",
-		900: "#4A1D96"
+		50: "#F5F3FF",
+		100: "#EDE9FE",
+		200: "#DDD6FE",
+		300: "#C4B5FD",
+		400: "#A78BFA",
+		500: "#8B5CF6",
+		600: "#7C3AED",
+		700: "#6D28D9",
+		800: "#5B21B6",
+		900: "#4C1D95"
 	},
 	pink: {
 		50: "#FDF2F8",
-		100: "#FCE8F3",
-		200: "#FAD1E8",
-		300: "#F8B4D9",
-		400: "#F17EB8",
-		500: "#E74694",
-		600: "#D61F69",
-		700: "#BF125D",
-		800: "#99154B",
-		900: "#751A3D"
+		100: "#FCE7F3",
+		200: "#FBCFE8",
+		300: "#F9A8D4",
+		400: "#F472B6",
+		500: "#EC4899",
+		600: "#DB2777",
+		700: "#BE185D",
+		800: "#9D174D",
+		900: "#831843"
 	},
 	"loop-color": {
-		1: "purple.400",
-		2: "green.500",
-		3: "blue.500",
+		1: "primary.400",
+		2: "jiqing.500",
+		3: "green.500",
 		4: "yellow.400",
-		5: "pink.300",
-		6: "jiqing.600",
-		7: "orange.400",
-		8: "gray.800",
-		9: "indigo.500",
-		10: "red.300",
-		11: "green.600",
+		5: "blue.500",
+		6: "orange.400",
+		7: "purple.400",
+		8: "gray.700",
+		9: "pink.400",
+		10: "red.400",
+		11: "indigo.600",
 		12: "yellow.700"
-	}
+	},
+	highlight: { background: {
+		1: {
+			color: "green.500",
+			alpha: .28
+		},
+		2: {
+			color: "jiqing.500",
+			alpha: .28
+		},
+		3: {
+			color: "blue.400",
+			alpha: .28
+		},
+		4: {
+			color: "yellow.400",
+			alpha: .28
+		},
+		5: {
+			color: "orange.400",
+			alpha: .28
+		},
+		6: {
+			color: "purple.400",
+			alpha: .28
+		},
+		7: {
+			color: "pink.400",
+			alpha: .28
+		},
+		8: {
+			color: "gray.400",
+			alpha: .3
+		},
+		9: {
+			color: "green.500",
+			alpha: .14
+		},
+		10: {
+			color: "jiqing.500",
+			alpha: .14
+		},
+		11: {
+			color: "blue.400",
+			alpha: .14
+		},
+		12: {
+			color: "yellow.400",
+			alpha: .14
+		},
+		13: {
+			color: "orange.400",
+			alpha: .14
+		},
+		14: {
+			color: "purple.400",
+			alpha: .14
+		},
+		15: {
+			color: "pink.400",
+			alpha: .14
+		},
+		16: {
+			color: "gray.400",
+			alpha: .15
+		}
+	} }
+};
+//#endregion
+//#region src/orange.ts
+const orangeTheme = {
+	white: "#FFFFFF",
+	black: "#000000",
+	primary: {
+		50: "#FFF7ED",
+		100: "#FFEDD5",
+		200: "#FED7AA",
+		300: "#FDBA74",
+		400: "#FB923C",
+		500: "#F97316",
+		600: "#EA580C",
+		700: "#C2410C",
+		800: "#9A3412",
+		900: "#7C2D12"
+	},
+	gray: {
+		50: "#FAFAF9",
+		100: "#F5F5F4",
+		200: "#E7E5E4",
+		300: "#D6D3D1",
+		400: "#A8A29E",
+		500: "#78716C",
+		600: "#57534E",
+		700: "#44403C",
+		800: "#292524",
+		900: "#1C1917"
+	},
+	blue: {
+		50: "#EFF6FF",
+		100: "#DBEAFE",
+		200: "#BFDBFE",
+		300: "#93C5FD",
+		400: "#60A5FA",
+		500: "#3B82F6",
+		600: "#2563EB",
+		700: "#1D4ED8",
+		800: "#1E40AF",
+		900: "#1E3A8A"
+	},
+	red: {
+		50: "#FFF1F2",
+		100: "#FFE4E6",
+		200: "#FECDD3",
+		300: "#FDA4AF",
+		400: "#FB7185",
+		500: "#F43F5E",
+		600: "#E11D48",
+		700: "#BE123C",
+		800: "#9F1239",
+		900: "#881337"
+	},
+	orange: {
+		50: "#FFF7ED",
+		100: "#FFEDD5",
+		200: "#FED7AA",
+		300: "#FDBA74",
+		400: "#FB923C",
+		500: "#F97316",
+		600: "#EA580C",
+		700: "#C2410C",
+		800: "#9A3412",
+		900: "#7C2D12"
+	},
+	yellow: {
+		50: "#FEFCE8",
+		100: "#FEF9C3",
+		200: "#FEF08A",
+		300: "#FDE047",
+		400: "#FACC15",
+		500: "#EAB308",
+		600: "#CA8A04",
+		700: "#A16207",
+		800: "#854D0E",
+		900: "#713F12"
+	},
+	green: {
+		50: "#F0FDF4",
+		100: "#DCFCE7",
+		200: "#BBF7D0",
+		300: "#86EFAC",
+		400: "#4ADE80",
+		500: "#22C55E",
+		600: "#16A34A",
+		700: "#15803D",
+		800: "#166534",
+		900: "#14532D"
+	},
+	jiqing: {
+		50: "#ECFEFF",
+		100: "#CFFAFE",
+		200: "#A5F3FC",
+		300: "#67E8F9",
+		400: "#22D3EE",
+		500: "#06B6D4",
+		600: "#0891B2",
+		700: "#0E7490",
+		800: "#155E75",
+		900: "#164E63"
+	},
+	indigo: {
+		50: "#EEF2FF",
+		100: "#E0E7FF",
+		200: "#C7D2FE",
+		300: "#A5B4FC",
+		400: "#818CF8",
+		500: "#6366F1",
+		600: "#4F46E5",
+		700: "#4338CA",
+		800: "#3730A3",
+		900: "#312E81"
+	},
+	purple: {
+		50: "#FAF5FF",
+		100: "#F3E8FF",
+		200: "#E9D5FF",
+		300: "#D8B4FE",
+		400: "#C084FC",
+		500: "#A855F7",
+		600: "#9333EA",
+		700: "#7E22CE",
+		800: "#6B21A8",
+		900: "#581C87"
+	},
+	pink: {
+		50: "#FDF2F8",
+		100: "#FCE7F3",
+		200: "#FBCFE8",
+		300: "#F9A8D4",
+		400: "#F472B6",
+		500: "#EC4899",
+		600: "#DB2777",
+		700: "#BE185D",
+		800: "#9D174D",
+		900: "#831843"
+	},
+	"loop-color": {
+		1: "primary.500",
+		2: "yellow.500",
+		3: "red.500",
+		4: "pink.500",
+		5: "purple.500",
+		6: "blue.500",
+		7: "jiqing.500",
+		8: "green.500",
+		9: "indigo.600",
+		10: "orange.700",
+		11: "gray.700",
+		12: "yellow.700"
+	},
+	highlight: { background: {
+		1: {
+			color: "primary.500",
+			alpha: .28
+		},
+		2: {
+			color: "yellow.500",
+			alpha: .28
+		},
+		3: {
+			color: "red.500",
+			alpha: .28
+		},
+		4: {
+			color: "pink.500",
+			alpha: .28
+		},
+		5: {
+			color: "purple.500",
+			alpha: .28
+		},
+		6: {
+			color: "blue.500",
+			alpha: .28
+		},
+		7: {
+			color: "green.500",
+			alpha: .28
+		},
+		8: {
+			color: "gray.400",
+			alpha: .28
+		},
+		9: {
+			color: "primary.500",
+			alpha: .14
+		},
+		10: {
+			color: "yellow.500",
+			alpha: .14
+		},
+		11: {
+			color: "red.500",
+			alpha: .14
+		},
+		12: {
+			color: "pink.500",
+			alpha: .14
+		},
+		13: {
+			color: "purple.500",
+			alpha: .14
+		},
+		14: {
+			color: "blue.500",
+			alpha: .14
+		},
+		15: {
+			color: "green.500",
+			alpha: .14
+		},
+		16: {
+			color: "gray.400",
+			alpha: .14
+		}
+	} }
+};
+//#endregion
+//#region src/purple.ts
+const purpleTheme = {
+	white: "#FFFFFF",
+	black: "#000000",
+	primary: {
+		50: "#F5F3FF",
+		100: "#EDE9FE",
+		200: "#DDD6FE",
+		300: "#C4B5FD",
+		400: "#A78BFA",
+		500: "#8B5CF6",
+		600: "#7C3AED",
+		700: "#6D28D9",
+		800: "#5B21B6",
+		900: "#4C1D95"
+	},
+	gray: {
+		50: "#FAFAFC",
+		100: "#F1F0F5",
+		200: "#E5E2EC",
+		300: "#C5BFCE",
+		400: "#91879E",
+		500: "#6F647B",
+		600: "#554B61",
+		700: "#403748",
+		800: "#302838",
+		900: "#241D2A"
+	},
+	blue: {
+		50: "#EFF6FF",
+		100: "#DBEAFE",
+		200: "#BFDBFE",
+		300: "#93C5FD",
+		400: "#60A5FA",
+		500: "#3B82F6",
+		600: "#2563EB",
+		700: "#1D4ED8",
+		800: "#1E40AF",
+		900: "#1E3A8A"
+	},
+	red: {
+		50: "#FFF1F2",
+		100: "#FFE4E6",
+		200: "#FECDD3",
+		300: "#FDA4AF",
+		400: "#FB7185",
+		500: "#F43F5E",
+		600: "#E11D48",
+		700: "#BE123C",
+		800: "#9F1239",
+		900: "#881337"
+	},
+	orange: {
+		50: "#FFF7ED",
+		100: "#FFEDD5",
+		200: "#FED7AA",
+		300: "#FDBA74",
+		400: "#FB923C",
+		500: "#F97316",
+		600: "#EA580C",
+		700: "#C2410C",
+		800: "#9A3412",
+		900: "#7C2D12"
+	},
+	yellow: {
+		50: "#FEFCE8",
+		100: "#FEF9C3",
+		200: "#FEF08A",
+		300: "#FDE047",
+		400: "#FACC15",
+		500: "#EAB308",
+		600: "#CA8A04",
+		700: "#A16207",
+		800: "#854D0E",
+		900: "#713F12"
+	},
+	green: {
+		50: "#F0FDF4",
+		100: "#DCFCE7",
+		200: "#BBF7D0",
+		300: "#86EFAC",
+		400: "#4ADE80",
+		500: "#22C55E",
+		600: "#16A34A",
+		700: "#15803D",
+		800: "#166534",
+		900: "#14532D"
+	},
+	jiqing: {
+		50: "#ECFEFF",
+		100: "#CFFAFE",
+		200: "#A5F3FC",
+		300: "#67E8F9",
+		400: "#22D3EE",
+		500: "#06B6D4",
+		600: "#0891B2",
+		700: "#0E7490",
+		800: "#155E75",
+		900: "#164E63"
+	},
+	indigo: {
+		50: "#EEF2FF",
+		100: "#E0E7FF",
+		200: "#C7D2FE",
+		300: "#A5B4FC",
+		400: "#818CF8",
+		500: "#6366F1",
+		600: "#4F46E5",
+		700: "#4338CA",
+		800: "#3730A3",
+		900: "#312E81"
+	},
+	purple: {
+		50: "#FAF5FF",
+		100: "#F3E8FF",
+		200: "#E9D5FF",
+		300: "#D8B4FE",
+		400: "#C084FC",
+		500: "#A855F7",
+		600: "#9333EA",
+		700: "#7E22CE",
+		800: "#6B21A8",
+		900: "#581C87"
+	},
+	pink: {
+		50: "#FDF2F8",
+		100: "#FCE7F3",
+		200: "#FBCFE8",
+		300: "#F9A8D4",
+		400: "#F472B6",
+		500: "#EC4899",
+		600: "#DB2777",
+		700: "#BE185D",
+		800: "#9D174D",
+		900: "#831843"
+	},
+	"loop-color": {
+		1: "primary.500",
+		2: "indigo.500",
+		3: "pink.500",
+		4: "blue.500",
+		5: "jiqing.500",
+		6: "green.500",
+		7: "yellow.500",
+		8: "orange.500",
+		9: "red.500",
+		10: "purple.700",
+		11: "gray.700",
+		12: "indigo.700"
+	},
+	highlight: { background: {
+		1: {
+			color: "primary.500",
+			alpha: .28
+		},
+		2: {
+			color: "indigo.500",
+			alpha: .28
+		},
+		3: {
+			color: "pink.500",
+			alpha: .28
+		},
+		4: {
+			color: "blue.500",
+			alpha: .28
+		},
+		5: {
+			color: "jiqing.500",
+			alpha: .28
+		},
+		6: {
+			color: "green.500",
+			alpha: .28
+		},
+		7: {
+			color: "yellow.500",
+			alpha: .28
+		},
+		8: {
+			color: "gray.400",
+			alpha: .28
+		},
+		9: {
+			color: "primary.500",
+			alpha: .14
+		},
+		10: {
+			color: "indigo.500",
+			alpha: .14
+		},
+		11: {
+			color: "pink.500",
+			alpha: .14
+		},
+		12: {
+			color: "blue.500",
+			alpha: .14
+		},
+		13: {
+			color: "jiqing.500",
+			alpha: .14
+		},
+		14: {
+			color: "green.500",
+			alpha: .14
+		},
+		15: {
+			color: "yellow.500",
+			alpha: .14
+		},
+		16: {
+			color: "gray.400",
+			alpha: .14
+		}
+	} }
+};
+//#endregion
+//#region src/red.ts
+const redTheme = {
+	white: "#FFFFFF",
+	black: "#000000",
+	primary: {
+		50: "#FFF1F2",
+		100: "#FFE4E6",
+		200: "#FECDD3",
+		300: "#FDA4AF",
+		400: "#FB7185",
+		500: "#F43F5E",
+		600: "#E11D48",
+		700: "#BE123C",
+		800: "#9F1239",
+		900: "#881337"
+	},
+	gray: {
+		50: "#FAF8F8",
+		100: "#F4EEEE",
+		200: "#E8DEDE",
+		300: "#CBBABA",
+		400: "#9D8585",
+		500: "#796363",
+		600: "#5E4949",
+		700: "#493737",
+		800: "#352727",
+		900: "#271D1D"
+	},
+	blue: {
+		50: "#EFF6FF",
+		100: "#DBEAFE",
+		200: "#BFDBFE",
+		300: "#93C5FD",
+		400: "#60A5FA",
+		500: "#3B82F6",
+		600: "#2563EB",
+		700: "#1D4ED8",
+		800: "#1E40AF",
+		900: "#1E3A8A"
+	},
+	red: {
+		50: "#FEF2F2",
+		100: "#FEE2E2",
+		200: "#FECACA",
+		300: "#FCA5A5",
+		400: "#F87171",
+		500: "#EF4444",
+		600: "#DC2626",
+		700: "#B91C1C",
+		800: "#991B1B",
+		900: "#7F1D1D"
+	},
+	orange: {
+		50: "#FFF7ED",
+		100: "#FFEDD5",
+		200: "#FED7AA",
+		300: "#FDBA74",
+		400: "#FB923C",
+		500: "#F97316",
+		600: "#EA580C",
+		700: "#C2410C",
+		800: "#9A3412",
+		900: "#7C2D12"
+	},
+	yellow: {
+		50: "#FFFBEB",
+		100: "#FEF3C7",
+		200: "#FDE68A",
+		300: "#FCD34D",
+		400: "#FBBF24",
+		500: "#F59E0B",
+		600: "#D97706",
+		700: "#B45309",
+		800: "#92400E",
+		900: "#78350F"
+	},
+	green: {
+		50: "#F0FDF4",
+		100: "#DCFCE7",
+		200: "#BBF7D0",
+		300: "#86EFAC",
+		400: "#4ADE80",
+		500: "#22C55E",
+		600: "#16A34A",
+		700: "#15803D",
+		800: "#166534",
+		900: "#14532D"
+	},
+	jiqing: {
+		50: "#ECFEFF",
+		100: "#CFFAFE",
+		200: "#A5F3FC",
+		300: "#67E8F9",
+		400: "#22D3EE",
+		500: "#06B6D4",
+		600: "#0891B2",
+		700: "#0E7490",
+		800: "#155E75",
+		900: "#164E63"
+	},
+	indigo: {
+		50: "#EEF2FF",
+		100: "#E0E7FF",
+		200: "#C7D2FE",
+		300: "#A5B4FC",
+		400: "#818CF8",
+		500: "#6366F1",
+		600: "#4F46E5",
+		700: "#4338CA",
+		800: "#3730A3",
+		900: "#312E81"
+	},
+	purple: {
+		50: "#FAF5FF",
+		100: "#F3E8FF",
+		200: "#E9D5FF",
+		300: "#D8B4FE",
+		400: "#C084FC",
+		500: "#A855F7",
+		600: "#9333EA",
+		700: "#7E22CE",
+		800: "#6B21A8",
+		900: "#581C87"
+	},
+	pink: {
+		50: "#FDF2F8",
+		100: "#FCE7F3",
+		200: "#FBCFE8",
+		300: "#F9A8D4",
+		400: "#F472B6",
+		500: "#EC4899",
+		600: "#DB2777",
+		700: "#BE185D",
+		800: "#9D174D",
+		900: "#831843"
+	},
+	"loop-color": {
+		1: "primary.500",
+		2: "orange.500",
+		3: "pink.500",
+		4: "purple.500",
+		5: "blue.500",
+		6: "yellow.500",
+		7: "jiqing.500",
+		8: "green.500",
+		9: "indigo.500",
+		10: "red.500",
+		11: "gray.700",
+		12: "orange.700"
+	},
+	highlight: { background: {
+		1: {
+			color: "red.500",
+			alpha: .28
+		},
+		2: {
+			color: "orange.500",
+			alpha: .28
+		},
+		3: {
+			color: "pink.500",
+			alpha: .28
+		},
+		4: {
+			color: "purple.500",
+			alpha: .28
+		},
+		5: {
+			color: "blue.500",
+			alpha: .28
+		},
+		6: {
+			color: "yellow.500",
+			alpha: .28
+		},
+		7: {
+			color: "jiqing.500",
+			alpha: .28
+		},
+		8: {
+			color: "gray.400",
+			alpha: .28
+		},
+		9: {
+			color: "red.500",
+			alpha: .14
+		},
+		10: {
+			color: "orange.500",
+			alpha: .14
+		},
+		11: {
+			color: "pink.500",
+			alpha: .14
+		},
+		12: {
+			color: "purple.500",
+			alpha: .14
+		},
+		13: {
+			color: "blue.500",
+			alpha: .14
+		},
+		14: {
+			color: "yellow.500",
+			alpha: .14
+		},
+		15: {
+			color: "jiqing.500",
+			alpha: .14
+		},
+		16: {
+			color: "gray.400",
+			alpha: .14
+		}
+	} }
 };
 //#endregion
-export { defaultTheme, greenTheme };
+export { defaultTheme, greenTheme, orangeTheme, purpleTheme, redTheme };