diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index 5fcee6e5a..4181f31f5 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -497,7 +497,7 @@ onBeforeUnmount(() => {
 			}
 
 			&:hover {
-				background: var(--X3);
+				background: var(--interactiveElementHovered);
 			}
 
 			&[data-selected="true"] {
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 3a6b8f321..1494fcd54 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -150,11 +150,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: var(--accent);
 
 		&:not(:disabled):hover {
-			background: var(--X8);
+			background: var(--accentLightenLess);
 		}
 
 		&:not(:disabled):active {
-			background: var(--X8);
+			background: var(--accentLightenLess);
 		}
 	}
 
@@ -168,11 +168,11 @@ function onMousedown(evt: MouseEvent): void {
 		);
 
 		&:not(:disabled):hover {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
+			background: var(--accentLightenLess);
 		}
 
 		&:not(:disabled):active {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
+			background: var(--accentLightenLess);
 		}
 	}
 
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index 12df63bf0..55b411b50 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -89,7 +89,7 @@ const bannerStyle = computed(() => {
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
+			background: linear-gradient(0deg, var(--panel), var(--panelFade));
 		}
 
 		> .name {
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 468982129..be477a8f3 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -259,7 +259,7 @@ export default defineComponent({
 				left: 0;
 				width: 100%;
 				height: 64px;
-				background: linear-gradient(0deg, var(--panel), var(--X15));
+				background: linear-gradient(0deg, var(--panel), var(--panelFade));
 
 				> span {
 					display: inline-block;
diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue
index 80acaf339..e9def98fa 100644
--- a/packages/client/src/components/MkInstanceSelectDialog.vue
+++ b/packages/client/src/components/MkInstanceSelectDialog.vue
@@ -142,7 +142,7 @@ const cancel = () => {
 				font-size: 14px;
 
 				&:hover {
-					background: var(--X7);
+					background: var(--interactiveElementHovered);
 				}
 
 				&.selected {
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index dd28974d6..d3cbf19a1 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -583,7 +583,7 @@ onUnmounted(() => {
 		// @media (pointer: coarse) {
 		// 	&:has(.button:focus-within) {
 		// 		z-index: 2;
-		// 		--X13: transparent;
+		// 		--dividerHovered: transparent;
 		// 		&::after {
 		// 			opacity: 1;
 		// 			backdrop-filter: var(--modalBgFilter);
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index e4a97d234..5bc7f3e5f 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -724,7 +724,7 @@ function noteClick(e) {
 		}
 		// &::after {
 		// 	content: "";
-		// 	border-top: 1px solid var(--X13);
+		// 	border-top: 1px solid var(--dividerHovered);
 		// 	position: absolute;
 		// 	bottom: 0;
 		// 	margin-left: calc(var(--avatarSize) + 12px);
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index d5d4007b9..60b51051e 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1187,7 +1187,7 @@ onMounted(() => {
 					margin: 0.3rem;
 					padding: 4px 0 4px 4px;
 					border-radius: 999px;
-					background: var(--X3);
+					background: var(--interactiveElementHovered);
 
 					> button {
 						padding: 4px 8px;
@@ -1260,7 +1260,7 @@ onMounted(() => {
 				border-radius: 6px;
 
 				&:hover {
-					background: var(--X5);
+					background: var(--postFormButtonHoverBg);
 				}
 
 				&.active {
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index 507d63c6b..4d5cff92f 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -184,7 +184,7 @@ onMounted(() => {
 				font-size: 14px;
 
 				&:hover {
-					background: var(--X7);
+					background: var(--interactiveElementHovered);
 				}
 
 				&.selected {
diff --git a/packages/client/src/components/MkUserSelectLocalDialog.vue b/packages/client/src/components/MkUserSelectLocalDialog.vue
index e3c3f2538..dd71a18e5 100644
--- a/packages/client/src/components/MkUserSelectLocalDialog.vue
+++ b/packages/client/src/components/MkUserSelectLocalDialog.vue
@@ -179,7 +179,7 @@ onMounted(() => {
 				font-size: 14px;
 
 				&:hover {
-					background: var(--X7);
+					background: var(--interactiveElementHovered);
 				}
 
 				&.selected {
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 704095829..d54c13d77 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -143,7 +143,7 @@ const headerActions = $computed(() => [
 					text: i18n.ts.edit,
 					handler: edit,
 				},
-		  ]
+			]
 		: []),
 ]);
 
@@ -155,7 +155,7 @@ definePageMetadata(
 			? {
 					title: channel.name,
 					icon: "ph-television ph-bold ph-lg",
-			  }
+				}
 			: null,
 	),
 );
@@ -201,7 +201,7 @@ definePageMetadata(
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
+			background: linear-gradient(0deg, var(--panel), var(--panelFade));
 		}
 
 		> .status {
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index fe6f2158f..568d85f94 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -241,7 +241,7 @@ definePageMetadata(
 			? {
 					title: post.title,
 					avatar: post.user,
-			  }
+				}
 			: null,
 	),
 );
@@ -299,7 +299,7 @@ definePageMetadata(
 			> .like {
 				> .button {
 					--accent: #eb6f92;
-					--X8: #eb6f92;
+					--accentLightenLess: #eb6f92;
 					--buttonBg: rgb(216 71 106 / 5%);
 					--buttonHoverBg: rgb(216 71 106 / 10%);
 					color: #eb6f92;
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index d49eda3be..f3fb921e3 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -261,7 +261,7 @@ function del(): void {
 			padding-right: 32px;
 
 			> .balloon {
-				$color: var(--X4);
+				$color: var(--messagingIsNotMe);
 				background: $color;
 
 				&.noText {
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index acb0f56c6..e870ecbdf 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -547,7 +547,7 @@ definePageMetadata({
 			font-weight: bold;
 			-webkit-backdrop-filter: var(--blur, blur(10px));
 			backdrop-filter: var(--blur, blur(10px));
-			background-color: var(--X16);
+			background-color: var(--panelTransparent);
 		}
 
 		> .content {
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 400c705d6..ca01111a1 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -93,11 +93,11 @@ export default defineComponent({
 	position: relative;
 	overflow: hidden;
 	background: var(--panel);
-	border: solid 2px var(--X12);
+	border: solid 2px var(--divider);
 	border-radius: 6px;
 
 	&:hover {
-		border: solid 2px var(--X13);
+		border: solid 2px var(--dividerHovered);
 	}
 
 	&.warn {
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index dca50c25f..069d5da29 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -315,7 +315,7 @@ definePageMetadata(
 						title: page.title || page.name,
 						text: page.summary,
 					},
-			  }
+				}
 			: null,
 	),
 );
@@ -401,7 +401,7 @@ definePageMetadata(
 			> .like {
 				> .button {
 					--accent: #eb6f92;
-					--X8: #eb6f92;
+					--accentLightenLess: #eb6f92;
 					--buttonBg: rgb(216 71 106 / 5%);
 					--buttonHoverBg: rgb(216 71 106 / 10%);
 					color: #eb6f92;
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 2d9777f9e..c5202c9ad 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -274,7 +274,7 @@ export default defineComponent({
 						background: linear-gradient(
 							0deg,
 							var(--panel),
-							var(--X15)
+							var(--panelFade)
 						);
 					}
 				}
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 074aa25ca..5cb3f9f6d 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -302,11 +302,11 @@ hr {
 	background: var(--accent);
 
 	&:not(:disabled):hover {
-		background: var(--X8);
+		background: var(--accentLightenLess);
 	}
 
 	&:not(:disabled):active {
-		background: var(--X9);
+		background: var(--accentDarkenLess);
 	}
 }
 
@@ -320,11 +320,11 @@ hr {
 	);
 
 	&:not(:disabled):hover {
-		background: linear-gradient(90deg, var(--X8), var(--X8));
+			background: var(--accentLightenLess)
 	}
 
 	&:not(:disabled):active {
-		background: linear-gradient(90deg, var(--X8), var(--X8));
+		background: var(--accentLightenLess)
 	}
 }
 
diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5
index 1653c195e..5d671b3ab 100644
--- a/packages/client/src/themes/_dark.json5
+++ b/packages/client/src/themes/_dark.json5
@@ -81,21 +81,15 @@
 		codeNumber: '#cfff9e',
 		codeBoolean: '#c59eff',
 		htmlThemeColor: '@bg',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 	},
 }
diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5
index 185a07e20..4aed71373 100644
--- a/packages/client/src/themes/_light.json5
+++ b/packages/client/src/themes/_light.json5
@@ -81,21 +81,15 @@
 		codeNumber: '#0fbbbb',
 		codeBoolean: '#62b70c',
 		htmlThemeColor: '@bg',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(0, 0, 0, 0.05)',
-		X4: 'rgba(0, 0, 0, 0.1)',
-		X5: 'rgba(0, 0, 0, 0.05)',
-		X6: 'rgba(0, 0, 0, 0.25)',
-		X7: 'rgba(0, 0, 0, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.1)',
-		X12: 'rgba(0, 0, 0, 0.1)',
-		X13: 'rgba(0, 0, 0, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
+		messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
+		postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
+		dividerHovered: 'rgba(0, 0, 0, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 	},
 }
diff --git a/packages/client/src/themes/d-astro.json5 b/packages/client/src/themes/d-astro.json5
index c6a927ec3..497e521d8 100644
--- a/packages/client/src/themes/d-astro.json5
+++ b/packages/client/src/themes/d-astro.json5
@@ -59,20 +59,15 @@
 		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 	},
 }
diff --git a/packages/client/src/themes/d-catppuccin-frappe.json5 b/packages/client/src/themes/d-catppuccin-frappe.json5
index 891fe1805..10aa4b17a 100644
--- a/packages/client/src/themes/d-catppuccin-frappe.json5
+++ b/packages/client/src/themes/d-catppuccin-frappe.json5
@@ -3,24 +3,18 @@
 	base: 'dark',
 	name: 'Catppuccin frappe',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#232634',
 		fg: '#c6d0f5',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#51576d',
 		cwFg: '#b5bfe2',
 		link: '#8caaee',
diff --git a/packages/client/src/themes/d-catppuccin-mocha.json5 b/packages/client/src/themes/d-catppuccin-mocha.json5
index 94e1381c7..686567f19 100644
--- a/packages/client/src/themes/d-catppuccin-mocha.json5
+++ b/packages/client/src/themes/d-catppuccin-mocha.json5
@@ -3,24 +3,18 @@
 	base: 'dark',
 	name: 'Catppuccin mocha',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#11111b',
 		fg: '#cdd6f4',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#45475a',
 		cwFg: '#bac2de',
 		link: '#89b4fa',
diff --git a/packages/client/src/themes/d-nord.json5 b/packages/client/src/themes/d-nord.json5
index 7e8b4f4d0..4f141c3da 100644
--- a/packages/client/src/themes/d-nord.json5
+++ b/packages/client/src/themes/d-nord.json5
@@ -4,24 +4,18 @@
 	desc: 'Nord: an arctic, north-bluish color palette',
 	name: 'Nord Dark',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#2e3440',
 		fg: '#eceff4',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#4c566a',
 		cwFg: '#393f4f',
 		link: '#b48ead',
diff --git a/packages/client/src/themes/d-rosepine.json5 b/packages/client/src/themes/d-rosepine.json5
index c948c29cf..cb3459996 100644
--- a/packages/client/src/themes/d-rosepine.json5
+++ b/packages/client/src/themes/d-rosepine.json5
@@ -4,24 +4,18 @@
 	desc: 'Soho vibes for Misskey',
 	name: 'Rosé Pine',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#191724',
 		fg: '#e0def4',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#1f1d2e',
 		cwFg: '#f6c177',
 		link: '#9ccfd8',
diff --git a/packages/client/src/themes/d-rosepinemoon.json5 b/packages/client/src/themes/d-rosepinemoon.json5
index 97c368a0f..7d23972dc 100644
--- a/packages/client/src/themes/d-rosepinemoon.json5
+++ b/packages/client/src/themes/d-rosepinemoon.json5
@@ -4,24 +4,18 @@
 	desc: 'Soho vibes for Misskey, moon edition',
 	name: 'Rosé Pine Moon',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#232136',
 		fg: '#e0def4',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#393552',
 		cwFg: '#f6c177',
 		link: '#3e8fb0',
diff --git a/packages/client/src/themes/d-u0.json5 b/packages/client/src/themes/d-u0.json5
index 67c9235df..f83c7b142 100644
--- a/packages/client/src/themes/d-u0.json5
+++ b/packages/client/src/themes/d-u0.json5
@@ -3,24 +3,18 @@
 	base: 'dark',
 	name: 'Mi U0 Dark',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#172426',
 		fg: '#dadada',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#687390',
 		cwFg: '#393f4f',
 		link: '@accent',
diff --git a/packages/client/src/themes/l-catppuccin-latte.json5 b/packages/client/src/themes/l-catppuccin-latte.json5
index 085e66df6..1d0afb553 100644
--- a/packages/client/src/themes/l-catppuccin-latte.json5
+++ b/packages/client/src/themes/l-catppuccin-latte.json5
@@ -3,24 +3,18 @@
 	base: "light",
 	name: "Catppuccin Latte",
 	props: {
-		X2: ":darken<2<@panel",
-		X3: "rgba(255, 255, 255, 0.05)",
-		X4: "rgba(255, 255, 255, 0.1)",
-		X5: "rgba(255, 255, 255, 0.05)",
-		X6: "rgba(255, 255, 255, 0.15)",
-		X7: "rgba(255, 255, 255, 0.05)",
-		X8: ":lighten<5<@accent",
-		X9: ":darken<5<@accent",
+		interactiveElementHovered: "rgba(255, 255, 255, 0.05)",
+		messagingIsNotMe: "rgba(255, 255, 255, 0.1)",
+		postFormButtonHoverBg: "rgba(255, 255, 255, 0.05)",
+		accentLightenLess: ":lighten<5<@accent",
+		accentDarkenLess: ":darken<5<@accent",
 		bg: "#dce0e8",
 		fg: "#4c4f69",
-		X10: ":alpha<0.4<@accent",
-		X11: "rgba(0, 0, 0, 0.3)",
-		X12: "rgba(255, 255, 255, 0.1)",
-		X13: "rgba(255, 255, 255, 0.15)",
-		X14: ":alpha<0.5<@navBg",
-		X15: ":alpha<0<@panel",
-		X16: ":alpha<0.7<@panel",
-		X17: ":alpha<0.8<@bg",
+		calendarInfoMeterBg: "rgba(0, 0, 0, 0.3)",
+		dividerHovered: "rgba(255, 255, 255, 0.15)",
+		navBgTransparent: ":alpha<0.5<@navBg",
+		panelFade: ":alpha<0<@panel",
+		panelTransparent: ":alpha<0.7<@panel",
 		cwBg: "#bcc0cc",
 		cwFg: "#5c5f77",
 		link: "#1e66f5",
diff --git a/packages/client/src/themes/l-nord.json5 b/packages/client/src/themes/l-nord.json5
index e359f31f4..6fc3e1764 100644
--- a/packages/client/src/themes/l-nord.json5
+++ b/packages/client/src/themes/l-nord.json5
@@ -4,24 +4,18 @@
 	desc: 'Nord: an arctic, north-bluish color palette',
 	name: 'Nord Light',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#d8dee9',
 		fg: '#3b4252',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#687390',
 		cwFg: '#393f4f',
 		link: '#44a4c1',
diff --git a/packages/client/src/themes/l-rosepinedawn.json5 b/packages/client/src/themes/l-rosepinedawn.json5
index d19eb5925..d0a947aa8 100644
--- a/packages/client/src/themes/l-rosepinedawn.json5
+++ b/packages/client/src/themes/l-rosepinedawn.json5
@@ -68,22 +68,16 @@
 		codeNumber: '#0fbbbb',
 		codeBoolean: '#62b70c',
 		htmlThemeColor: '@bg',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(0, 0, 0, 0.05)',
-		X4: 'rgba(0, 0, 0, 0.1)',
-		X5: 'rgba(0, 0, 0, 0.05)',
-		X6: 'rgba(0, 0, 0, 0.25)',
-		X7: 'rgba(0, 0, 0, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.1)',
-		X12: 'rgba(0, 0, 0, 0.1)',
-		X13: 'rgba(0, 0, 0, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
+		messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
+		postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
+		dividerHovered: 'rgba(0, 0, 0, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 	},
 	author: '@thatonecalculator@stop.voring.me',
 }
diff --git a/packages/client/src/themes/l-u0.json5 b/packages/client/src/themes/l-u0.json5
index 03b114ba3..71bf0ed47 100644
--- a/packages/client/src/themes/l-u0.json5
+++ b/packages/client/src/themes/l-u0.json5
@@ -3,24 +3,18 @@
 	base: 'light',
 	name: 'Mi U0 Light',
 	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
+		interactiveElementHovered: 'rgba(255, 255, 255, 0.05)',
+		messagingIsNotMe: 'rgba(255, 255, 255, 0.1)',
+		postFormButtonHoverBg: 'rgba(255, 255, 255, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
 		bg: '#e7e7eb',
 		fg: '#5f5f5f',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.3)',
+		dividerHovered: 'rgba(255, 255, 255, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 		cwBg: '#687390',
 		cwFg: '#393f4f',
 		link: '@accent',
diff --git a/packages/client/src/themes/l-vivid.json5 b/packages/client/src/themes/l-vivid.json5
index b3c08f38a..1fe5e859b 100644
--- a/packages/client/src/themes/l-vivid.json5
+++ b/packages/client/src/themes/l-vivid.json5
@@ -62,21 +62,15 @@
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: '@divider',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(0, 0, 0, 0.05)',
-		X4: 'rgba(0, 0, 0, 0.1)',
-		X5: 'rgba(0, 0, 0, 0.05)',
-		X6: 'rgba(0, 0, 0, 0.25)',
-		X7: 'rgba(0, 0, 0, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.1)',
-		X12: 'rgba(0, 0, 0, 0.1)',
-		X13: 'rgba(0, 0, 0, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
+		interactiveElementHovered: 'rgba(0, 0, 0, 0.05)',
+		messagingIsNotMe: 'rgba(0, 0, 0, 0.1)',
+		postFormButtonHoverBg: 'rgba(0, 0, 0, 0.05)',
+		accentLightenLess: ':lighten<5<@accent',
+		accentDarkenLess: ':darken<5<@accent',
+		calendarInfoMeterBg: 'rgba(0, 0, 0, 0.1)',
+		dividerHovered: 'rgba(0, 0, 0, 0.15)',
+		navBgTransparent: ':alpha<0.5<@navBg',
+		panelFade: ':alpha<0<@panel',
+		panelTransparent: ':alpha<0.7<@panel',
 	},
 }
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 8796010dd..6e6204761 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -171,7 +171,7 @@ function more() {
 			top: 0;
 			z-index: 1;
 			padding: 2rem 0;
-			background: var(--X14);
+			background: var(--navBgTransparent);
 			-webkit-backdrop-filter: var(--blur, blur(8px));
 			backdrop-filter: var(--blur, blur(8px));
 
@@ -213,7 +213,7 @@ function more() {
 			position: sticky;
 			bottom: 0;
 			padding: 20px 0;
-			background: var(--X14);
+			background: var(--navBgTransparent);
 			-webkit-backdrop-filter: var(--blur, blur(8px));
 			backdrop-filter: var(--blur, blur(8px));
 
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index e00c7ae37..905c6ee36 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -30,7 +30,7 @@
 													)
 													.map((c) => c.width),
 											) + 'px',
-								  }
+									}
 						"
 						@wheel.self="onWheel"
 					>
@@ -58,7 +58,7 @@
 											columns.find(
 												(c) => c.id === ids[0],
 											)!.width + 'px',
-								  }
+									}
 						"
 						@parent-focus="moveFocus(ids[0], $event)"
 						@headerWheel="onWheel"
@@ -558,7 +558,7 @@ async function deleteProfile() {
 			}
 
 			&:hover {
-				background: var(--X2);
+				background: var(--buttonHoverBg);
 			}
 
 			> .indicator {
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 00342ff70..feba0b2c0 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -174,7 +174,7 @@ export default defineComponent({
 	line-height: $height;
 	-webkit-backdrop-filter: var(--blur, blur(32px));
 	backdrop-filter: var(--blur, blur(32px));
-	background-color: var(--X16);
+	background-color: var(--panelTransparent);
 
 	> .wide {
 		> .content {
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index eb2ec6c41..c2ae3cfc2 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -214,7 +214,7 @@ defineExpose<WidgetComponentExpose>({
 			> .meter {
 				width: 100%;
 				overflow: hidden;
-				background: var(--X11);
+				background: var(--calendarInfoMeterBg);
 				border-radius: 8px;
 
 				> .val {