From 2ca1cbe51b01e0e3a0ab64e870dc0cab95921db6 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Fri, 8 Nov 2024 16:04:32 +0000
Subject: copy changes from MkNote* to SkNote*

---
 .../frontend/src/components/SkNoteDetailed.vue     | 42 +++++++++++-----------
 1 file changed, 21 insertions(+), 21 deletions(-)

(limited to 'packages/frontend/src/components/SkNoteDetailed.vue')

diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 7907da6c94..3fb8e76d51 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -143,7 +143,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				ref="renoteButton"
 				class="_button"
 				:class="$style.noteFooterButton"
-				:style="renoted ? 'color: var(--accent) !important;' : ''"
+				:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
 				@mousedown.prevent="renoted ? undoRenote() : boostVisibility()"
 			>
 				<i class="ti ti-repeat"></i>
@@ -166,7 +166,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</button>
 			<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
 				<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
-				<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
+				<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
 				<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
 				<i v-else class="ph-smiley ph-bold ph-lg"></i>
 				<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
@@ -877,8 +877,8 @@ onUnmounted(() => {
 			margin: auto;
 			width: calc(100% - 8px);
 			height: calc(100% - 8px);
-			border: dashed 2px var(--focus);
-			border-radius: var(--radius);
+			border: dashed 2px var(--MI_THEME-focus);
+			border-radius: var(--MI-radius);
 			box-sizing: border-box;
 		}
 	}
@@ -904,7 +904,7 @@ onUnmounted(() => {
 	padding: 16px 32px 8px 32px;
 	line-height: 28px;
 	white-space: pre;
-	color: var(--renote);
+	color: var(--MI_THEME-renote);
 }
 
 .renoteAvatar {
@@ -967,8 +967,8 @@ onUnmounted(() => {
 			margin: auto;
 			width: calc(100% - 8px);
 			height: calc(100% - 8px);
-			border: solid 1px var(--focus);
-			border-radius: var(--radius);
+			border: solid 1px var(--MI_THEME-focus);
+			border-radius: var(--MI-radius);
 			box-sizing: border-box;
 		}
 	}
@@ -1009,7 +1009,7 @@ onUnmounted(() => {
 	padding: 4px 6px;
 	font-size: 80%;
 	line-height: 1;
-	border: solid 0.5px var(--divider);
+	border: solid 0.5px var(--MI_THEME-divider);
 	border-radius: var(--radius-xs);
 }
 
@@ -1049,19 +1049,19 @@ onUnmounted(() => {
 }
 
 .noteReplyTarget {
-	color: var(--accent);
+	color: var(--MI_THEME-accent);
 	margin-right: 0.5em;
 }
 
 .rn {
 	margin-left: 4px;
 	font-style: oblique;
-	color: var(--renote);
+	color: var(--MI_THEME-renote);
 }
 
 .translation {
-	border: solid 0.5px var(--divider);
-	border-radius: var(--radius);
+	border: solid 0.5px var(--MI_THEME-divider);
+	border-radius: var(--MI-radius);
 	padding: 12px;
 	margin-top: 8px;
 }
@@ -1076,7 +1076,7 @@ onUnmounted(() => {
 
 .quoteNote {
 	padding: 16px;
-	border: solid 1px var(--renote);
+	border: solid 1px var(--MI_THEME-renote);
 	border-radius: var(--radius-sm);
 	overflow: clip;
 }
@@ -1102,7 +1102,7 @@ onUnmounted(() => {
 	}
 
 	&:hover {
-		color: var(--fgHighlighted);
+		color: var(--MI_THEME-fgHighlighted);
 	}
 }
 
@@ -1112,17 +1112,17 @@ onUnmounted(() => {
 	opacity: 0.7;
 
 	&.reacted {
-		color: var(--accent);
+		color: var(--MI_THEME-accent);
 	}
 }
 
 .reply:not(:first-child) {
-	border-top: solid 0.5px var(--divider);
+	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 
 .tabs {
-	border-top: solid 0.5px var(--divider);
-	border-bottom: solid 0.5px var(--divider);
+	border-top: solid 0.5px var(--MI_THEME-divider);
+	border-bottom: solid 0.5px var(--MI_THEME-divider);
 	display: flex;
 }
 
@@ -1141,7 +1141,7 @@ onUnmounted(() => {
 }
 
 .tabActive {
-	border-bottom: solid 2px var(--accent);
+	border-bottom: solid 2px var(--MI_THEME-accent);
 }
 
 .tab_renotes {
@@ -1161,12 +1161,12 @@ onUnmounted(() => {
 
 .reactionTab {
 	padding: 4px 6px;
-	border: solid 1px var(--divider);
+	border: solid 1px var(--MI_THEME-divider);
 	border-radius: var(--radius-sm);
 }
 
 .reactionTabActive {
-	border-color: var(--accent);
+	border-color: var(--MI_THEME-accent);
 }
 
 @container (max-width: 500px) {
-- 
cgit v1.2.3-freya


From a930fd9758c6efaf1cc1da7b3e365ba590a5d298 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Fri, 8 Nov 2024 17:18:29 +0000
Subject: probably fix most renamed CSS variables

---
 .../frontend/src/components/MkAchievements.vue     |  8 ++--
 packages/frontend/src/components/MkAsUi.vue        |  2 +-
 .../frontend/src/components/MkAutocomplete.vue     |  2 +-
 packages/frontend/src/components/MkButton.vue      |  8 ++--
 .../src/components/MkChannelFollowButton.vue       |  2 +-
 .../frontend/src/components/MkChannelPreview.vue   |  6 +--
 packages/frontend/src/components/MkChartLegend.vue |  4 +-
 packages/frontend/src/components/MkCode.core.vue   |  4 +-
 packages/frontend/src/components/MkCode.vue        |  4 +-
 packages/frontend/src/components/MkCodeEditor.vue  |  6 +--
 packages/frontend/src/components/MkColorInput.vue  |  2 +-
 packages/frontend/src/components/MkContainer.vue   |  6 +--
 .../src/components/MkDateSeparatedList.vue         |  2 +-
 packages/frontend/src/components/MkDialog.vue      |  2 +-
 packages/frontend/src/components/MkDonation.vue    |  2 +-
 packages/frontend/src/components/MkDrive.file.vue  |  2 +-
 .../frontend/src/components/MkDrive.folder.vue     |  4 +-
 .../src/components/MkDriveFileThumbnail.vue        |  2 +-
 .../src/components/MkEmojiPicker.section.vue       |  4 +-
 packages/frontend/src/components/MkEmojiPicker.vue |  2 +-
 .../src/components/MkEmojiPickerDialog.vue         |  2 +-
 .../frontend/src/components/MkFileListForAdmin.vue |  2 +-
 packages/frontend/src/components/MkFolder.vue      |  6 +--
 .../frontend/src/components/MkFollowButton.vue     |  2 +-
 packages/frontend/src/components/MkGoogle.vue      |  4 +-
 packages/frontend/src/components/MkInput.vue       |  2 +-
 .../frontend/src/components/MkInstanceCardMini.vue |  4 +-
 .../frontend/src/components/MkInstanceTicker.vue   |  2 +-
 packages/frontend/src/components/MkLaunchPad.vue   |  6 +--
 packages/frontend/src/components/MkMediaBanner.vue |  4 +-
 packages/frontend/src/components/MkMediaImage.vue  |  6 +--
 packages/frontend/src/components/MkMediaList.vue   |  2 +-
 packages/frontend/src/components/MkMediaVideo.vue  |  8 ++--
 packages/frontend/src/components/MkMention.vue     |  4 +-
 packages/frontend/src/components/MkMenu.vue        |  6 +--
 packages/frontend/src/components/MkNote.vue        | 16 ++++----
 .../frontend/src/components/MkNoteDetailed.vue     | 14 +++----
 packages/frontend/src/components/MkNoteHeader.vue  |  2 +-
 packages/frontend/src/components/MkNotePreview.vue |  2 +-
 packages/frontend/src/components/MkNoteSimple.vue  |  2 +-
 packages/frontend/src/components/MkNoteSub.vue     | 12 +++---
 packages/frontend/src/components/MkNotes.vue       |  2 +-
 .../frontend/src/components/MkNotification.vue     |  8 ++--
 packages/frontend/src/components/MkOmit.vue        |  2 +-
 packages/frontend/src/components/MkPoll.vue        |  6 +--
 packages/frontend/src/components/MkPopupMenu.vue   |  2 +-
 packages/frontend/src/components/MkPostForm.vue    | 14 +++----
 .../frontend/src/components/MkPostFormAttaches.vue |  2 +-
 packages/frontend/src/components/MkRadio.vue       |  6 +--
 packages/frontend/src/components/MkRange.vue       |  8 ++--
 .../src/components/MkReactionsViewer.reaction.vue  |  6 +--
 packages/frontend/src/components/MkSelect.vue      |  2 +-
 .../src/components/MkSignupDialog.rules.vue        |  2 +-
 .../src/components/MkSourceCodeAvailablePopup.vue  |  2 +-
 .../frontend/src/components/MkSubNoteContent.vue   |  8 ++--
 packages/frontend/src/components/MkSuperMenu.vue   |  4 +-
 .../frontend/src/components/MkSwitch.button.vue    |  4 +-
 packages/frontend/src/components/MkTab.vue         |  2 +-
 packages/frontend/src/components/MkTextarea.vue    |  2 +-
 packages/frontend/src/components/MkToast.vue       |  2 +-
 packages/frontend/src/components/MkTooltip.vue     |  2 +-
 .../src/components/MkTutorialDialog.PostNote.vue   |  2 +-
 .../src/components/MkTutorialDialog.Sensitive.vue  |  2 +-
 .../src/components/MkTutorialDialog.Timeline.vue   |  2 +-
 packages/frontend/src/components/MkUrlPreview.vue  |  2 +-
 .../frontend/src/components/MkUrlWarningDialog.vue |  6 +--
 .../frontend/src/components/MkUserCardMini.vue     |  2 +-
 packages/frontend/src/components/MkUserInfo.vue    |  8 ++--
 .../src/components/MkUserOnlineIndicator.vue       |  2 +-
 packages/frontend/src/components/MkUserPopup.vue   | 16 ++++----
 .../src/components/MkUserSetupDialog.User.vue      |  4 +-
 .../frontend/src/components/MkVisibilityPicker.vue |  2 +-
 .../frontend/src/components/MkVisitorDashboard.vue |  2 +-
 packages/frontend/src/components/MkWidgets.vue     |  2 +-
 .../frontend/src/components/SkInstanceTicker.vue   |  2 +-
 packages/frontend/src/components/SkMfmWindow.vue   |  6 +--
 packages/frontend/src/components/SkModPlayer.vue   | 48 +++++++++++-----------
 packages/frontend/src/components/SkNote.vue        | 48 +++++++++++-----------
 .../frontend/src/components/SkNoteDetailed.vue     | 14 +++----
 packages/frontend/src/components/SkNoteHeader.vue  |  2 +-
 packages/frontend/src/components/SkNoteSimple.vue  |  2 +-
 packages/frontend/src/components/SkNoteSub.vue     | 46 ++++++++++-----------
 .../frontend/src/components/SkOldNoteWindow.vue    | 22 +++++-----
 packages/frontend/src/components/SkOneko.vue       |  2 +-
 .../frontend/src/components/SkUserRecentNotes.vue  |  2 +-
 packages/frontend/src/components/form/link.vue     |  2 +-
 packages/frontend/src/components/global/MkAd.vue   |  4 +-
 .../frontend/src/components/global/MkError.vue     |  2 +-
 packages/frontend/src/components/global/MkMfm.ts   |  2 +-
 .../src/components/global/MkPageHeader.tabs.vue    |  4 +-
 .../src/components/global/MkPageHeader.vue         |  2 +-
 packages/frontend/src/pages/_error_.vue            |  2 +-
 packages/frontend/src/pages/about-sharkey.vue      | 22 +++++-----
 packages/frontend/src/pages/about.overview.vue     | 18 ++++----
 packages/frontend/src/pages/admin-user.vue         | 12 +++---
 packages/frontend/src/pages/admin/_header_.vue     |  4 +-
 packages/frontend/src/pages/admin/index.vue        |  2 +-
 .../frontend/src/pages/admin/modlog.ModLog.vue     |  2 +-
 .../src/pages/admin/overview.federation.vue        |  2 +-
 .../frontend/src/pages/admin/overview.stats.vue    |  2 +-
 packages/frontend/src/pages/admin/server-rules.vue |  4 +-
 packages/frontend/src/pages/antenna-timeline.vue   |  2 +-
 packages/frontend/src/pages/channel.vue            |  4 +-
 packages/frontend/src/pages/drive.file.info.vue    |  2 +-
 packages/frontend/src/pages/emoji-edit-dialog.vue  |  2 +-
 packages/frontend/src/pages/emojis.emoji.vue       |  2 +-
 packages/frontend/src/pages/follow-requests.vue    |  2 +-
 packages/frontend/src/pages/following-feed.vue     |  4 +-
 packages/frontend/src/pages/instance-info.vue      |  2 +-
 packages/frontend/src/pages/invite.vue             |  2 +-
 packages/frontend/src/pages/list.vue               |  2 +-
 packages/frontend/src/pages/my-antennas/index.vue  |  2 +-
 packages/frontend/src/pages/my-lists/index.vue     |  2 +-
 .../pages/page-editor/page-editor.container.vue    |  2 +-
 packages/frontend/src/pages/role.vue               |  2 +-
 .../settings/avatar-decoration.decoration.vue      |  2 +-
 .../frontend/src/pages/settings/drive-cleaner.vue  |  2 +-
 packages/frontend/src/pages/settings/drive.vue     |  4 +-
 .../frontend/src/pages/settings/emoji-picker.vue   |  4 +-
 packages/frontend/src/pages/settings/theme.vue     |  4 +-
 packages/frontend/src/pages/theme-editor.vue       |  8 ++--
 packages/frontend/src/pages/timeline.vue           |  2 +-
 packages/frontend/src/pages/user-list-timeline.vue |  2 +-
 packages/frontend/src/pages/user/home.vue          | 24 +++++------
 packages/frontend/src/pages/user/index.files.vue   |  2 +-
 packages/frontend/src/pages/user/lists.vue         |  2 +-
 packages/frontend/src/pages/user/raw.vue           |  2 +-
 packages/frontend/src/pages/welcome.entrance.a.vue |  6 +--
 .../frontend/src/pages/welcome.timeline.note.vue   |  2 +-
 packages/frontend/src/scripts/favicon-dot.ts       |  6 +--
 packages/frontend/src/style.scss                   | 45 ++++++++++----------
 .../frontend/src/ui/_common_/navbar-for-mobile.vue |  4 +-
 packages/frontend/src/ui/_common_/navbar.vue       |  8 ++--
 packages/frontend/src/ui/_common_/notification.vue |  2 +-
 packages/frontend/src/ui/_common_/upload.vue       |  4 +-
 packages/frontend/src/ui/deck.vue                  |  4 +-
 packages/frontend/src/ui/deck/column.vue           |  4 +-
 packages/frontend/src/ui/universal.vue             |  4 +-
 packages/frontend/src/ui/visitor.vue               |  2 +-
 packages/frontend/src/ui/zen.vue                   |  2 +-
 packages/frontend/src/widgets/WidgetAiscript.vue   |  2 +-
 packages/frontend/src/widgets/WidgetCalendar.vue   |  2 +-
 packages/frontend/src/widgets/WidgetFederation.vue |  2 +-
 .../frontend/src/widgets/WidgetInstanceInfo.vue    |  2 +-
 packages/frontend/src/widgets/WidgetMemo.vue       |  2 +-
 packages/frontend/src/widgets/WidgetPhotos.vue     |  4 +-
 packages/frontend/src/widgets/WidgetSearch.vue     |  2 +-
 147 files changed, 399 insertions(+), 400 deletions(-)

(limited to 'packages/frontend/src/components/SkNoteDetailed.vue')

diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
index ab7bafc47a..087ad51fe3 100644
--- a/packages/frontend/src/components/MkAchievements.vue
+++ b/packages/frontend/src/components/MkAchievements.vue
@@ -121,10 +121,10 @@ onMounted(() => {
 
 .iconFrame {
 	position: relative;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 	padding: 6px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	box-sizing: border-box;
 	pointer-events: none;
 	user-select: none;
@@ -191,7 +191,7 @@ onMounted(() => {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	box-shadow: 0 1px 0px #ffffff88 inset;
 }
 
diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue
index 13680e7d9c..c28dbc7ffa 100644
--- a/packages/frontend/src/components/MkAsUi.vue
+++ b/packages/frontend/src/components/MkAsUi.vue
@@ -166,6 +166,6 @@ function openPostForm() {
 
 .postForm {
 	background: var(--MI_THEME-bg);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 </style>
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index ef6b8c69e5..a0cd066c06 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -427,7 +427,7 @@ onBeforeUnmount(() => {
 	max-width: 28px;
 	max-height: 28px;
 	margin: 0 8px 0 0;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 }
 
 .userName {
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 6427f9b58a..a6e5651d63 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -130,7 +130,7 @@ function onMousedown(evt: MouseEvent): void {
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--MI_THEME-buttonBg);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
@@ -162,7 +162,7 @@ function onMousedown(evt: MouseEvent): void {
 	}
 
 	&.rounded {
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 	}
 
 	&.primary {
@@ -272,7 +272,7 @@ function onMousedown(evt: MouseEvent): void {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 	pointer-events: none;
 }
@@ -281,7 +281,7 @@ function onMousedown(evt: MouseEvent): void {
 	position: absolute;
 	width: 2px;
 	height: 2px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	background: rgba(0, 0, 0, 0.1);
 	opacity: 1;
 	transform: scale(1);
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
index 99922ffbc8..7aa916134f 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.vue
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -74,7 +74,7 @@ async function onClick() {
 	padding: 0;
 	height: 31px;
 	font-size: 16px;
-	border-radius: var(--radius-xl);
+	border-radius: var(--MI-radius-xl);
 	background: #fff;
 
 	&.full {
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index a25c596975..a63006dfe4 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -138,7 +138,7 @@ const bannerStyle = computed(() => {
 			padding: 8px 12px;
 			font-size: 80%;
 			background: rgba(0, 0, 0, 0.7);
-			border-radius: var(--radius-sm);
+			border-radius: var(--MI-radius-sm);
 			color: #fff;
 		}
 
@@ -149,7 +149,7 @@ const bannerStyle = computed(() => {
 			left: 16px;
 			background: rgba(0, 0, 0, 0.7);
 			color: var(--MI_THEME-warn);
-			border-radius: var(--radius-sm);
+			border-radius: var(--MI-radius-sm);
 			font-weight: bold;
 			font-size: 1em;
 			padding: 4px 7px;
@@ -215,7 +215,7 @@ const bannerStyle = computed(() => {
 	transform: translate(25%, -25%);
 	background-color: var(--MI_THEME-accent);
 	border: solid var(--MI_THEME-bg) 4px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	width: 1.5rem;
 	height: 1.5rem;
 	aspect-ratio: 1 / 1;
diff --git a/packages/frontend/src/components/MkChartLegend.vue b/packages/frontend/src/components/MkChartLegend.vue
index 1e402a617c..e28d6ad6ba 100644
--- a/packages/frontend/src/components/MkChartLegend.vue
+++ b/packages/frontend/src/components/MkChartLegend.vue
@@ -54,7 +54,7 @@ defineExpose({
 			font-size: 85%;
 			padding: 4px 12px 4px 8px;
 			border: solid 1px var(--MI_THEME-divider);
-			border-radius: var(--radius-ellipse);
+			border-radius: var(--MI-radius-ellipse);
 
 			&:hover {
 				border-color: var(--MI_THEME-inputBorderHover);
@@ -69,7 +69,7 @@ defineExpose({
 				display: inline-block;
 				width: 12px;
 				height: 12px;
-				border-radius: var(--radius-full);
+				border-radius: var(--MI-radius-full);
 				vertical-align: -10%;
 			}
 		}
diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue
index ae80bf33ba..e253b1b55f 100644
--- a/packages/frontend/src/components/MkCode.core.vue
+++ b/packages/frontend/src/components/MkCode.core.vue
@@ -95,7 +95,7 @@ watch(() => props.lang, (to) => {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	border: 1px solid var(--MI_THEME-divider);
 	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 
@@ -140,7 +140,7 @@ watch(() => props.lang, (to) => {
 	& :global(.shiki) {
 		padding: 12px;
 		margin: 0;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 		border: none;
 		min-height: 130px;
 		pointer-events: none;
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index b4a04d4cc3..a46b220101 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -75,7 +75,7 @@ function copy() {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .codeBlockFallbackCode {
@@ -91,7 +91,7 @@ function copy() {
 	cursor: pointer;
 
 	box-sizing: border-box;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	padding: 24px;
 	margin-top: 4px;
 	color: var(--MI_THEME-fg);
diff --git a/packages/frontend/src/components/MkCodeEditor.vue b/packages/frontend/src/components/MkCodeEditor.vue
index 1f9bd3e186..49b083815a 100644
--- a/packages/frontend/src/components/MkCodeEditor.vue
+++ b/packages/frontend/src/components/MkCodeEditor.vue
@@ -158,7 +158,7 @@ watch(v, newValue => {
 	overflow-y: hidden;
 	box-sizing: border-box;
 	margin: 0;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	padding: 0;
 	color: var(--MI_THEME-fg);
 	border: solid 1px var(--MI_THEME-panel);
@@ -171,7 +171,7 @@ watch(v, newValue => {
 
 .focused.codeEditorRoot {
 	border-color: var(--MI_THEME-accent) !important;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .codeEditorScroller {
@@ -199,7 +199,7 @@ watch(v, newValue => {
 	caret-color: var(--MI_THEME-fg);
 	background-color: transparent;
 	border: 0;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	box-sizing: border-box;
 	outline: 0;
 	min-width: calc(100% - 24px);
diff --git a/packages/frontend/src/components/MkColorInput.vue b/packages/frontend/src/components/MkColorInput.vue
index e83c0bccd4..babf356942 100644
--- a/packages/frontend/src/components/MkColorInput.vue
+++ b/packages/frontend/src/components/MkColorInput.vue
@@ -101,7 +101,7 @@ const onInput = () => {
 	color: var(--MI_THEME-fg);
 	background: var(--MI_THEME-panel);
 	border: solid 1px var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 15d41baa7e..55442f8598 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -138,7 +138,7 @@ onUnmounted(() => {
 	position: relative;
 	overflow: clip;
 	contain: content;
-	background: color-mix(in srgb, var(--panel) 65%, transparent);
+	background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent);
 	&.naked {
 		background: transparent !important;
 		box-shadow: none !important;
@@ -172,7 +172,7 @@ onUnmounted(() => {
 	border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider);
 	z-index: 2;
 	line-height: 1.4em;
-	background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
+	background: color-mix(in srgb, var(--MI_THEME-panelHeaderBg) 35%, transparent);
 }
 
 .title {
@@ -224,7 +224,7 @@ onUnmounted(() => {
 				background: var(--MI_THEME-panel);
 				padding: 6px 10px;
 				font-size: 0.8em;
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 			}
 
diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index 8fda097df6..46c667768f 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -190,7 +190,7 @@ export default defineComponent({
 }
 
 .date-separated-list-nogap {
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 
 	> * {
 		margin: 0 !important;
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
index 5af2816acf..73b3f457d4 100644
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -186,7 +186,7 @@ function onInputKeydown(evt: KeyboardEvent) {
 	box-sizing: border-box;
 	text-align: center;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 }
 
 .icon {
diff --git a/packages/frontend/src/components/MkDonation.vue b/packages/frontend/src/components/MkDonation.vue
index 9f413fc078..43d2002204 100644
--- a/packages/frontend/src/components/MkDonation.vue
+++ b/packages/frontend/src/components/MkDonation.vue
@@ -83,7 +83,7 @@ function neverShow() {
 	width: calc(100% - (var(--MI-margin) * 2));
 	max-width: 500px;
 	display: flex;
-	backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
 }
 
 .icon {
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
index f7249f19fb..5dee448329 100644
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -112,7 +112,7 @@ function onDragend() {
 	position: relative;
 	padding: 8px 0 0 0;
 	min-height: 180px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	cursor: pointer;
 
 	&:hover {
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
index a0693c3827..8496890f60 100644
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -314,7 +314,7 @@ function onContextmenu(ev: MouseEvent) {
 	padding: 8px;
 	height: 64px;
 	background: var(--MI_THEME-driveFolderBg);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 	cursor: pointer;
 
 	&.draghover {
@@ -327,7 +327,7 @@ function onContextmenu(ev: MouseEvent) {
 			bottom: -4px;
 			left: -4px;
 			border: 2px dashed var(--MI_THEME-focus);
-			border-radius: var(--radius-xs);
+			border-radius: var(--MI-radius-xs);
 		}
 	}
 }
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
index 623c4895eb..1079e52030 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.vue
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -70,7 +70,7 @@ const isThumbnailAvailable = computed(() => {
 	position: relative;
 	display: flex;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index e2762eb3cb..fac3c045dc 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
-<section v-if="!hasChildSection" v-panel style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);">
+<section v-if="!hasChildSection" v-panel style="border-radius: var(--MI-radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);">
 	<header class="_acrylic" @click="shown = !shown">
 		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ph-smiley-sticker ph-bold ph-lg"></i>:{{ emojis.length }})
 	</header>
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </section>
 <!-- フォルダの中にはカスタム絵文字やフォルダがある -->
-<section v-else v-panel style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);">
+<section v-else v-panel style="border-radius: var(--MI-radius-sm); border-bottom: 0.5px solid var(--MI_THEME-divider);">
 	<header class="_acrylic" @click="shown = !shown">
 		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder ti-fw"></i>:{{ customEmojiTree?.length }} <i class="ph-smiley-sticker ph-bold ph-lg ti-fw"></i>:{{ emojis.length }})
 	</header>
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 667bb832a2..17e989aefa 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -722,7 +722,7 @@ defineExpose({
 					width: var(--eachSize);
 					height: var(--eachSize);
 					contain: strict;
-					border-radius: var(--radius-xs);
+					border-radius: var(--MI-radius-xs);
 					font-size: 24px;
 
 					&:hover {
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 18e80d8445..3178f72498 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -87,7 +87,7 @@ function opening() {
 
 <style lang="scss" module>
 .drawer {
-	border-radius: var(--radius-lg);
+	border-radius: var(--MI-radius-lg);
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
index 5bc85a3a83..204bf69f48 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.vue
+++ b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -108,7 +108,7 @@ const props = defineProps<{
 				padding: 2px 4px;
 				background: #ff0000bf;
 				color: #fff;
-				border-radius: var(--radius-xs);
+				border-radius: var(--MI-radius-xs);
 				font-size: 85%;
 				animation: sensitive-blink 1s infinite;
 			}
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 3715654b03..4c483c59f0 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -147,7 +147,7 @@ onMounted(() => {
 	background: var(--MI_THEME-folderHeaderBg);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	transition: border-radius 0.3s;
 
 	&:hover {
@@ -165,7 +165,7 @@ onMounted(() => {
 	}
 
 	&.opened {
-		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+		border-radius: var(--MI-radius-sm) var(--MI-radius-sm) 0 0;
 	}
 }
 
@@ -225,7 +225,7 @@ onMounted(() => {
 
 .body {
 	background: var(--MI_THEME-panel);
-	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+	border-radius: 0 0 var(--MI-radius-sm) var(--MI-radius-sm);
 	container-type: inline-size;
 
 	&.bgSame {
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index 3733583192..a02a570180 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -170,7 +170,7 @@ onBeforeUnmount(() => {
 	padding: 0;
 	height: 31px;
 	font-size: 16px;
-	border-radius: var(--radius-xl);
+	border-radius: var(--MI-radius-xl);
 	background: #fff;
 
 	&.full {
diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue
index ad26030846..6cdab2479e 100644
--- a/packages/frontend/src/components/MkGoogle.vue
+++ b/packages/frontend/src/components/MkGoogle.vue
@@ -42,7 +42,7 @@ const search = () => {
 	height: 40px;
 	font-size: 16px;
 	border: solid 1px var(--MI_THEME-divider);
-	border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+	border-radius: var(--MI-radius-xs) 0 0 var(--MI-radius-xs);
 	-webkit-appearance: textfield;
 }
 
@@ -52,7 +52,7 @@ const search = () => {
 	padding: 0 16px;
 	border: solid 1px var(--MI_THEME-divider);
 	border-left: none;
-	border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+	border-radius: 0 var(--MI-radius-xs) var(--MI-radius-xs) 0;
 
 	&:active {
 		box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue
index edaa605590..7510b77724 100644
--- a/packages/frontend/src/components/MkInput.vue
+++ b/packages/frontend/src/components/MkInput.vue
@@ -245,7 +245,7 @@ defineExpose({
 	color: var(--MI_THEME-fg);
 	background: var(--MI_THEME-panel);
 	border: solid 1px var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
index 4ba49be941..b063b82b17 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.vue
+++ b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -47,14 +47,14 @@ function getInstanceIcon(instance): string {
 	align-items: center;
 	padding: 16px;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	> :global(.icon) {
 		display: block;
 		width: ($bodyTitleHieght + $bodyInfoHieght);
 		height: ($bodyTitleHieght + $bodyInfoHieght);
 		object-fit: cover;
-		border-radius: var(--radius-xs);
+		border-radius: var(--MI-radius-xs);
 		margin-right: 10px;
 	}
 
diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 46d42248d3..2a8d5c9f71 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -46,7 +46,7 @@ $height: 2ex;
 	display: flex;
 	align-items: center;
 	height: $height;
-	border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+	border-radius: var(--MI-radius-xs) 0 0 var(--MI-radius-xs);
 	overflow: clip;
 	color: #fff;
 	text-shadow: /* .866 ≈ sin(60deg) */
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index 0382dbe926..c7af75e2e7 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -77,12 +77,12 @@ function close() {
 	overflow: auto;
 	overscroll-behavior: contain;
 	text-align: left;
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 
 	&.asDrawer {
 		width: 100%;
 		padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px;
-		border-radius: var(--radius-lg);
+		border-radius: var(--MI-radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 		text-align: center;
@@ -100,7 +100,7 @@ function close() {
 			justify-content: center;
 			vertical-align: bottom;
 			height: 100px;
-			border-radius: var(--radius);
+			border-radius: var(--MI-radius);
 			padding: 10px;
 			box-sizing: border-box;
 
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
index e1714fb54d..56048a33d8 100644
--- a/packages/frontend/src/components/MkMediaBanner.vue
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -53,7 +53,7 @@ async function show() {
 <style lang="scss" module>
 .root {
 	width: 100%;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 	margin-top: 4px;
 	overflow: clip;
 }
@@ -76,7 +76,7 @@ async function show() {
 }
 
 .audio {
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 </style>
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 2aedaa4cd6..4aca7256a5 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -186,7 +186,7 @@ function showMenu(ev: MouseEvent) {
 .hide {
 	display: block;
 	position: absolute;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	background-color: black;
 	color: var(--MI_THEME-accentLighten);
 	font-size: 12px;
@@ -225,7 +225,7 @@ html[data-color-scheme=light] .visible {
 .menu {
 	display: block;
 	position: absolute;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	background-color: rgba(0, 0, 0, 0.3);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
@@ -261,7 +261,7 @@ html[data-color-scheme=light] .visible {
 .indicator {
 	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	color: var(--MI_THEME-accentLighten);
 	display: inline-block;
 	font-weight: bold;
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
index 7f8033bcb6..ae7234d1fa 100644
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -324,7 +324,7 @@ defineExpose({
 
 .media {
 	overflow: hidden; // clipにするとバグる
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 :global(.pswp) {
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index c3cecba7b7..8936cd8a5d 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -539,7 +539,7 @@ onDeactivated(() => {
 .hide {
 	display: block;
 	position: absolute;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	background-color: black;
 	color: var(--MI_THEME-accentLighten);
 	font-size: 12px;
@@ -728,10 +728,10 @@ onDeactivated(() => {
 }
 
 .indicator {
-	/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
+	/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
 	background-color: black;
-	border-radius: var(--radius-sm);
-	color: var(--accentLighten);
+	border-radius: var(--MI-radius-sm);
+	color: var(--MI_THEME-accentLighten);
 	display: inline-block;
 	font-weight: bold;
 	font-size: 0.8em;
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index 0391c6bc39..f64ca4bc77 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -46,7 +46,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
 .root {
 	display: inline-block;
 	padding: 4px 8px 4px 4px;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	color: var(--MI_THEME-mention);
 	background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
 	white-space: nowrap;
@@ -63,7 +63,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
 	object-fit: cover;
 	margin: 0 0.2em 0 0;
 	vertical-align: bottom;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 }
 
 .host {
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index ff5f9b9a5d..b0a1b80210 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -454,7 +454,7 @@ onBeforeUnmount(() => {
 		> .menu {
 			padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 			width: 100%;
-			border-radius: var(--radius-lg);
+			border-radius: var(--MI-radius-lg);
 			border-bottom-right-radius: 0;
 			border-bottom-left-radius: 0;
 
@@ -464,7 +464,7 @@ onBeforeUnmount(() => {
 
 				&::before {
 					width: calc(100% - 24px);
-					border-radius: var(--radius);
+					border-radius: var(--MI-radius);
 				}
 
 				> .icon {
@@ -520,7 +520,7 @@ onBeforeUnmount(() => {
 		margin: auto;
 		width: calc(100% - 16px);
 		height: 100%;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 	}
 
 	&:focus-visible {
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 55259406f8..380e7bfbe2 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -132,7 +132,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					ref="renoteButton"
 					:class="$style.footerButton"
 					class="_button"
-					:style="renoted ? 'color: var(--accent) !important;' : ''"
+					:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
 					@click.stop
 					@mousedown.prevent="renoted ? undoRenote(appearNote) : boostVisibility()"
 				>
@@ -922,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 			padding: 0 4px;
 			margin-bottom: 0 !important;
 			background: var(--MI_THEME-popup);
-			border-radius: var(--radius-sm);
+			border-radius: var(--MI-radius-sm);
 			box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
 		}
 
@@ -1067,7 +1067,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	left: 8px;
 	width: 5px;
 	height: calc(100% - 16px);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	pointer-events: none;
 }
 
@@ -1075,8 +1075,8 @@ function emitUpdReaction(emoji: string, delta: number) {
 	flex-shrink: 0;
 	display: block !important;
 	margin: 0 14px 0 0;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 	position: sticky !important;
 	top: calc(22px + var(--MI-stickyTop, 0px));
 	left: 0;
@@ -1106,7 +1106,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	background: var(--MI_THEME-popup);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 
@@ -1136,7 +1136,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	background: var(--MI_THEME-panel);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 
@@ -1176,7 +1176,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 .quoteNote {
 	padding: 16px;
 	border: dashed 1px var(--MI_THEME-renote);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 1e0c78e82e..6828e6ef67 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -135,7 +135,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				ref="renoteButton"
 				class="_button"
 				:class="$style.noteFooterButton"
-				:style="renoted ? 'color: var(--accent) !important;' : ''"
+				:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
 				@mousedown.prevent="renoted ? undoRenote() : boostVisibility()"
 			>
 				<i class="ti ti-repeat"></i>
@@ -883,7 +883,7 @@ function animatedMFM() {
 	width: 28px;
 	height: 28px;
 	margin: 0 8px 0 0;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .renoteText {
@@ -932,8 +932,8 @@ function animatedMFM() {
 .noteHeaderAvatar {
 	display: block;
 	flex-shrink: 0;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 }
 
 .noteHeaderBody {
@@ -957,7 +957,7 @@ function animatedMFM() {
 	font-size: 80%;
 	line-height: 1;
 	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .noteHeaderInfo {
@@ -1017,7 +1017,7 @@ function animatedMFM() {
 .quoteNote {
 	padding: 16px;
 	border: dashed 1px var(--MI_THEME-renote);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 
@@ -1095,7 +1095,7 @@ function animatedMFM() {
 .reactionTab {
 	padding: 4px 6px;
 	border: solid 1px var(--MI_THEME-divider);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .reactionTabActive {
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 10107ba0b1..b01f87a121 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -92,7 +92,7 @@ const mock = inject<boolean>('mock', false);
 	padding: 1px 6px;
 	font-size: 80%;
 	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .username {
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index 7ccc2c0320..4f907231bb 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -56,7 +56,7 @@ const props = defineProps<{
 	margin: 0 10px 0 0 !important;
 	width: 40px !important;
 	height: 40px !important;
-	border-radius: var(--radius-sm) !important;
+	border-radius: var(--MI-radius-sm) !important;
 	pointer-events: none !important;
 }
 
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 4a4cdef679..273d49efd6 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -56,7 +56,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	margin: 0 10px 0 0;
 	width: 34px;
 	height: 34px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	position: sticky !important;
 	top: calc(16px + var(--MI-stickyTop, 0px));
 	left: 0;
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index c0be406893..3ab0227695 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					ref="renoteButton"
 					class="_button"
 					:class="$style.noteFooterButton"
-					:style="renoted ? 'color: var(--accent) !important;' : ''"
+					:style="renoted ? 'color: var(--MI_THEME-accent) !important;' : ''"
 					@mousedown="renoted ? undoRenote() : boostVisibility()"
 				>
 					<i class="ph-rocket-launch ph-bold ph-lg"></i>
@@ -438,7 +438,7 @@ if (props.detail) {
 	left: 8px;
 	width: 5px;
 	height: calc(100% - 8px);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	pointer-events: none;
 }
 
@@ -448,7 +448,7 @@ if (props.detail) {
 	margin: 0 8px 0 0;
 	width: 38px;
 	height: 38px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .body {
@@ -475,7 +475,7 @@ if (props.detail) {
 	}
 
 	&:hover {
-		color: var(--fgHighlighted);
+		color: var(--MI_THEME-fgHighlighted);
 	}
 }
 
@@ -493,7 +493,7 @@ if (props.detail) {
 	opacity: 0.7;
 
 	&.reacted {
-		color: var(--accent);
+		color: var(--MI_THEME-accent);
 	}
 }
 
@@ -533,6 +533,6 @@ if (props.detail) {
 	padding: 8px !important;
 	border: 1px solid var(--MI_THEME-divider);
 	margin: 8px 8px 0 8px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 </style>
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index 4144e69d1e..b13df2813b 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -61,7 +61,7 @@ defineExpose({
 <style lang="scss" module>
 .root {
 	&.noGap {
-		border-radius: var(--radius);
+		border-radius: var(--MI-radius);
 
 		> .notes {
 			background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent);
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index ed66360d0e..7976cdab5b 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -267,7 +267,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 	width: 80%;
 	height: 80%;
 	font-size: 15px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	color: #fff;
 }
 
@@ -284,7 +284,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 }
 
 .icon_app {
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .subIcon {
@@ -295,7 +295,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 	width: 20px;
 	height: 20px;
 	box-sizing: border-box;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	background: var(--MI_THEME-panel);
 	box-shadow: 0 0 0 3px var(--MI_THEME-panel);
 	font-size: 11px;
@@ -448,7 +448,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 	width: 20px;
 	height: 20px;
 	box-sizing: border-box;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	background: var(--MI_THEME-panel);
 	box-shadow: 0 0 0 3px var(--MI_THEME-panel);
 	font-size: 11px;
diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
index e19c34ba87..b978a71c15 100644
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@@ -69,7 +69,7 @@ onUnmounted(() => {
 				background: var(--MI_THEME-panel);
 				padding: 6px 10px;
 				font-size: 0.8em;
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 			}
 
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index e11fb4fc99..7c61ba1e83 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<p v-if="!readOnly" :class="$style.info">
 		<span>{{ i18n.tsx._poll.totalVotes({ n: total }) }}</span>
 		<span v-if="poll.multiple"> · </span>
-		<span v-if="poll.multiple" style="color: var(--accent); font-weight: bolder;">{{ i18n.ts._poll.multiple }}</span>
+		<span v-if="poll.multiple" style="color: var(--MI_THEME-accent); font-weight: bolder;">{{ i18n.ts._poll.multiple }}</span>
 		<span> · </span>
 		<a v-if="!closed && !isVoted" style="color: inherit;" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
 		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
@@ -141,7 +141,7 @@ const refreshVotes = async () => {
 	padding: 4px;
 	//border: solid 0.5px var(--MI_THEME-divider);
 	background: var(--MI_THEME-accentedBg);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 	overflow: clip;
 	cursor: pointer;
 }
@@ -161,7 +161,7 @@ const refreshVotes = async () => {
 	display: inline-block;
 	padding: 3px 5px;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .info {
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
index d14873008b..932e515892 100644
--- a/packages/frontend/src/components/MkPopupMenu.vue
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -73,7 +73,7 @@ function close() {
 
 <style lang="scss" module>
 .drawer {
-	border-radius: var(--radius-lg);
+	border-radius: var(--MI-radius-lg);
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b7d67f19ad..689884f653 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkAcct :user="u"/>
 				<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
 			</span>
-			<button class="_buttonPrimary" style="padding: 4px; border-radius: var(--radius-sm);" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
+			<button class="_buttonPrimary" style="padding: 4px; border-radius: var(--MI-radius-sm);" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
 		</div>
 	</div>
 	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
@@ -1207,7 +1207,7 @@ defineExpose({
 	left: 12px;
 	width: 5px;
 	height: 100% ;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	pointer-events: none;
 }
 
@@ -1215,7 +1215,7 @@ defineExpose({
 	padding: 0 12px;
 	line-height: 34px;
 	font-weight: bold;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	min-width: 90px;
 	box-sizing: border-box;
 	color: var(--MI_THEME-fgOnAccent);
@@ -1225,7 +1225,7 @@ defineExpose({
 .headerRightItem {
 	margin: 0;
 	padding: 8px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		background: var(--MI_THEME-X5);
@@ -1291,7 +1291,7 @@ defineExpose({
 .visibleUser {
 	margin-right: 14px;
 	padding: 8px 0 8px 8px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	background: var(--MI_THEME-X4);
 }
 
@@ -1363,7 +1363,7 @@ defineExpose({
 	padding: 4px 6px;
 	font-size: .9em;
 	color: var(--MI_THEME-warn);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	min-width: 1.6em;
 	text-align: center;
 
@@ -1403,7 +1403,7 @@ defineExpose({
 	font-size: 1em;
 	width: auto;
 	height: 100%;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		background: var(--MI_THEME-X5);
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index a601a110fa..b3f95b75a2 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -203,7 +203,7 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | Keyboar
 	width: 64px;
 	height: 64px;
 	margin-right: 4px;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 	overflow: hidden;
 	cursor: move;
 
diff --git a/packages/frontend/src/components/MkRadio.vue b/packages/frontend/src/components/MkRadio.vue
index 838eaee292..fc5ea59a3c 100644
--- a/packages/frontend/src/components/MkRadio.vue
+++ b/packages/frontend/src/components/MkRadio.vue
@@ -56,7 +56,7 @@ function toggle(): void {
 	background-color: var(--MI_THEME-panel);
 	background-clip: padding-box !important;
 	border: solid 1px var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	font-size: 90%;
 	transition: all 0.2s;
 	user-select: none;
@@ -107,7 +107,7 @@ function toggle(): void {
 	height: 14px;
 	background: none;
 	border: solid 2px var(--MI_THEME-inputBorder);
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	transition: inherit;
 
 	&::after {
@@ -118,7 +118,7 @@ function toggle(): void {
 		right: 3px;
 		bottom: 3px;
 		left: 3px;
-		border-radius: var(--radius-full);
+		border-radius: var(--MI-radius-full);
 		opacity: 0;
 		transform: scale(0);
 		transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue
index 72e9aa6c0b..d009f3858c 100644
--- a/packages/frontend/src/components/MkRange.vue
+++ b/packages/frontend/src/components/MkRange.vue
@@ -226,7 +226,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 		padding: 7px 12px;
 		background: var(--MI_THEME-panel);
 		border: solid 1px var(--MI_THEME-panel);
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 
 		> .container {
 			position: relative;
@@ -242,7 +242,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 				width: calc(100% - #{$thumbWidth});
 				height: 3px;
 				background: rgba(0, 0, 0, 0.1);
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 				overflow: clip;
 
 				> .highlight {
@@ -273,7 +273,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 					height: 3px;
 					margin-left: - math.div($tickWidth, 2);
 					background: var(--MI_THEME-divider);
-					border-radius: var(--radius-ellipse);
+					border-radius: var(--MI-radius-ellipse);
 				}
 			}
 
@@ -283,7 +283,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 				height: $thumbHeight;
 				cursor: grab;
 				background: var(--MI_THEME-accent);
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 
 				&:hover {
 					background: var(--MI_THEME-accentLighten);
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index 32ab8ac3c3..9cd972639f 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -175,7 +175,7 @@ if (!mock) {
 	margin: 2px;
 	padding: 0 6px;
 	font-size: 1.5em;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	align-items: center;
 	justify-content: center;
 
@@ -194,7 +194,7 @@ if (!mock) {
 	&.small {
 		height: 32px;
 		font-size: 1em;
-		border-radius: var(--radius-xs);
+		border-radius: var(--MI-radius-xs);
 
 		> .count {
 			font-size: 0.9em;
@@ -205,7 +205,7 @@ if (!mock) {
 	&.large {
 		height: 52px;
 		font-size: 2em;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 
 		> .count {
 			font-size: 0.6em;
diff --git a/packages/frontend/src/components/MkSelect.vue b/packages/frontend/src/components/MkSelect.vue
index 154fff6d2f..ca988178e1 100644
--- a/packages/frontend/src/components/MkSelect.vue
+++ b/packages/frontend/src/components/MkSelect.vue
@@ -259,7 +259,7 @@ function show() {
 	color: var(--MI_THEME-fg);
 	background: var(--MI_THEME-panel);
 	border: solid 1px var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkSignupDialog.rules.vue b/packages/frontend/src/components/MkSignupDialog.rules.vue
index 12f9621fda..06481b808c 100644
--- a/packages/frontend/src/components/MkSignupDialog.rules.vue
+++ b/packages/frontend/src/components/MkSignupDialog.rules.vue
@@ -183,7 +183,7 @@ async function updateAgreeNote(v: boolean) {
 		font-weight: bold;
 		align-items: center;
 		justify-content: center;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 	}
 }
 
diff --git a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
index 9bfa2789af..84dc244b23 100644
--- a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
+++ b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
@@ -71,7 +71,7 @@ function close() {
 	width: calc(100% - (var(--MI-margin) * 2));
 	max-width: 500px;
 	display: flex;
-	backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
 }
 
 .icon {
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 46ef575c23..a32fd53c51 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -117,7 +117,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 				background: var(--MI_THEME-panel);
 				padding: 6px 10px;
 				font-size: 0.8em;
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 			}
 
@@ -142,8 +142,8 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 }
 
 .translation {
-	border: solid 0.5px var(--divider);
-	border-radius: var(--radius);
+	border: solid 0.5px var(--MI_THEME-divider);
+	border-radius: var(--MI-radius);
 	padding: 12px;
 	margin-top: 8px;
 }
@@ -164,7 +164,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	background: var(--MI_THEME-popup);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index e938da8e57..e8ed7f6e04 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -59,7 +59,7 @@ defineProps<{
 				width: 100%;
 				box-sizing: border-box;
 				padding: 9px 16px 9px 8px;
-				border-radius: var(--radius-sm);
+				border-radius: var(--MI-radius-sm);
 				font-size: 0.9em;
 
 				&:hover {
@@ -145,7 +145,7 @@ defineProps<{
 						height: 60px;
 						aspect-ratio: 1;
 						background: var(--MI_THEME-panel);
-						border-radius: var(--radius-full);
+						border-radius: var(--MI-radius-full);
 					}
 
 					> .text {
diff --git a/packages/frontend/src/components/MkSwitch.button.vue b/packages/frontend/src/components/MkSwitch.button.vue
index a06a407de1..581aa4e644 100644
--- a/packages/frontend/src/components/MkSwitch.button.vue
+++ b/packages/frontend/src/components/MkSwitch.button.vue
@@ -54,7 +54,7 @@ const toggle = () => {
 	background: var(--MI_THEME-switchOffBg);
 	background-clip: content-box;
 	border: solid 1px var(--MI_THEME-switchOffBg);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	cursor: pointer;
 	transition: inherit;
 	user-select: none;
@@ -75,7 +75,7 @@ const toggle = () => {
 	top: 3px;
 	width: calc(var(--height) - 6px);
 	height: calc(var(--height) - 6px);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	transition: all 0.2s ease;
 
 	&:not(.knobChecked) {
diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue
index 07ab007482..52e4d304bc 100644
--- a/packages/frontend/src/components/MkTab.vue
+++ b/packages/frontend/src/components/MkTab.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 	> button {
 		flex: 1;
 		padding: 10px 8px;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 
 		&:disabled {
 			opacity: 1 !important;
diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue
index 9a003d9db8..9deb6528d1 100644
--- a/packages/frontend/src/components/MkTextarea.vue
+++ b/packages/frontend/src/components/MkTextarea.vue
@@ -182,7 +182,7 @@ onUnmounted(() => {
 	color: var(--MI_THEME-fg);
 	background: var(--MI_THEME-panel);
 	border: solid 1px var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	outline: none;
 	box-shadow: none;
 	box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index f731b3264f..38b537cbc9 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -70,7 +70,7 @@ onMounted(() => {
 	max-width: calc(100% - 32px);
 	width: min-content;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 	text-align: center;
 	pointer-events: none;
diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
index 25350a8a40..22e74aa6d1 100644
--- a/packages/frontend/src/components/MkTooltip.vue
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -109,7 +109,7 @@ onUnmounted(() => {
 	padding: 8px 12px;
 	box-sizing: border-box;
 	text-align: center;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 	border: solid 0.5px var(--MI_THEME-divider);
 	pointer-events: none;
 	transform-origin: center center;
diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
index 0d210acbae..367c573617 100644
--- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
@@ -116,7 +116,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 		background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 	}
 
diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
index 3ac58163c5..e1fc3e4f26 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
@@ -126,7 +126,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 		background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 	}
 
diff --git a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
index 328f7e95d1..931b7343c5 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
@@ -66,7 +66,7 @@ import { basicTimelineIconClass, basicTimelineTypes } from '@/timelines.js';
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 		background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 	}
 
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index be12304ae6..98b65aca84 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -241,7 +241,7 @@ onUnmounted(() => {
 	display: block;
 	font-size: 14px;
 	box-shadow: 0 0 0 1px var(--MI_THEME-divider);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 
 	&:hover {
diff --git a/packages/frontend/src/components/MkUrlWarningDialog.vue b/packages/frontend/src/components/MkUrlWarningDialog.vue
index f2e9b11fd9..3bec6eecdd 100644
--- a/packages/frontend/src/components/MkUrlWarningDialog.vue
+++ b/packages/frontend/src/components/MkUrlWarningDialog.vue
@@ -94,7 +94,7 @@ onBeforeUnmount(() => {
 	min-width: 320px;
 	max-width: 480px;
 	box-sizing: border-box;
-	background: var(--panel);
+	background: var(--MI_THEME-panel);
 	border-radius: 16px;
 }
 
@@ -106,7 +106,7 @@ onBeforeUnmount(() => {
 
 .icon {
 	font-size: 18px;
-	color: var(--warn);
+	color: var(--MI_THEME-warn);
 }
 
 .title {
@@ -117,7 +117,7 @@ onBeforeUnmount(() => {
 .urlAddress {
 	padding: 10px 14px;
 	border-radius: 8px;
-	border: 1px solid var(--divider);
+	border: 1px solid var(--MI_THEME-divider);
 	overflow-x: auto;
 	white-space: nowrap;
 }
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index f3c3625c3a..ce28f6ec5e 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -50,7 +50,7 @@ $bodyInfoHieght: 16px;
 	align-items: center;
 	padding: 16px;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .avatar {
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 64a3867d33..a6bbacacee 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -75,8 +75,8 @@ defineProps<{
 	top: 62px;
 	left: 13px;
 	z-index: 2;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 	border: solid 4px var(--MI_THEME-panel);
 }
 
@@ -110,7 +110,7 @@ defineProps<{
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .description {
@@ -169,7 +169,7 @@ defineProps<{
 		color: #fff;
 		background: rgba(0, 0, 0, 0.7);
 		font-size: 0.7em;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 		list-style-type: none;
 		margin-left: 0;
 	}
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue
index a4fee52367..7a6ded110a 100644
--- a/packages/frontend/src/components/MkUserOnlineIndicator.vue
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue
@@ -40,7 +40,7 @@ const text = computed(() => {
 
 	// sharkey: the comment mentions something about 100% radius not behaving correctly on blink.
 	// couldn't reproduce, assuming the 120% here was just an old workaround
-	border-radius: var(--radius-full); // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
+	border-radius: var(--MI-radius-full); // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
 
 	&.status_online {
 		background: #58d4c9;
diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index 9de8639fe4..2bdf854d1e 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -160,7 +160,7 @@ onMounted(() => {
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .locked:first-child {
@@ -171,7 +171,7 @@ onMounted(() => {
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .locked:not(:first-child) {
@@ -182,7 +182,7 @@ onMounted(() => {
 	color: #fff;
 	background: rgba(0, 0, 0, 0.7);
 	font-size: 0.7em;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .avatarBack {
@@ -202,8 +202,8 @@ onMounted(() => {
 	right: 0;
 	margin: 0 auto;
 	z-index: 2;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 }
 
 .title {
@@ -238,8 +238,8 @@ onMounted(() => {
 .fields {
 	font-size: 0.8em;
 	padding: 16px;
-	border-top: solid 1px var(--divider);
-	border-bottom: solid 1px var(--divider);
+	border-top: solid 1px var(--MI_THEME-divider);
+	border-bottom: solid 1px var(--MI_THEME-divider);
 }
 
 .field {
@@ -305,7 +305,7 @@ onMounted(() => {
 	right: 44px;
 	padding: 6px;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 }
 
 .follow {
diff --git a/packages/frontend/src/components/MkUserSetupDialog.User.vue b/packages/frontend/src/components/MkUserSetupDialog.User.vue
index c7732af808..4c4f4989c5 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.User.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.User.vue
@@ -59,8 +59,8 @@ async function follow() {
 	top: 30px;
 	left: 13px;
 	z-index: 2;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 	border: solid 4px var(--MI_THEME-panel);
 }
 
diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue
index 465204d7a2..5624abbd33 100644
--- a/packages/frontend/src/components/MkVisibilityPicker.vue
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@@ -82,7 +82,7 @@ function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
 	&.asDrawer {
 		padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 		width: 100%;
-		border-radius: var(--radius-lg);
+		border-radius: var(--MI-radius-lg);
 		border-bottom-right-radius: 0;
 		border-bottom-left-radius: 0;
 
diff --git a/packages/frontend/src/components/MkVisitorDashboard.vue b/packages/frontend/src/components/MkVisitorDashboard.vue
index 688340c6b1..54f2ee655c 100644
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@@ -140,7 +140,7 @@ function showMenu(ev: MouseEvent) {
 	right: 16px;
 	width: 32px;
 	height: 32px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	font-size: 18px;
 	z-index: 50;
 }
diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
index f3d0bcd58f..7a1d9f4728 100644
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -158,7 +158,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		height: 32px;
 		color: #fff;
 		background: rgba(#000, 0.7);
-		border-radius: var(--radius-xs);
+		border-radius: var(--MI-radius-xs);
 	}
 
 	&Config {
diff --git a/packages/frontend/src/components/SkInstanceTicker.vue b/packages/frontend/src/components/SkInstanceTicker.vue
index eb987d9c77..2bfe5cc157 100644
--- a/packages/frontend/src/components/SkInstanceTicker.vue
+++ b/packages/frontend/src/components/SkInstanceTicker.vue
@@ -45,7 +45,7 @@ const bg = {
 	display: flex;
 	align-items: center;
 	height: 1.5ex;
-	border-radius: var(--radius-xl);
+	border-radius: var(--MI-radius-xl);
 	padding: 4px;
 	overflow: clip;
 	color: #fff;
diff --git a/packages/frontend/src/components/SkMfmWindow.vue b/packages/frontend/src/components/SkMfmWindow.vue
index c599531ec5..aaf2fdc9fb 100644
--- a/packages/frontend/src/components/SkMfmWindow.vue
+++ b/packages/frontend/src/components/SkMfmWindow.vue
@@ -494,8 +494,8 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[
 			top: var(--stickyTop, 0px);
 			padding: 16px;
 			font-weight: bold;
-			-webkit-backdrop-filter: var(--blur, blur(10px));
-			backdrop-filter: var(--blur, blur(10px));
+			-webkit-backdrop-filter: var(--MI-blur, blur(10px));
+			backdrop-filter: var(--MI-blur, blur(10px));
 			background-color: var(--X16);
 		}
 
@@ -507,7 +507,7 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[
 			}
 
 			> .preview {
-				border-top: solid 0.5px var(--divider);
+				border-top: solid 0.5px var(--MI_THEME-divider);
 				padding: 16px;
 			}
 		}
diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 58a96cfb63..8607bca45d 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -440,9 +440,9 @@ onDeactivated(() => {
 <style lang="scss" scoped>
 
 .hide {
-	border-radius: var(--radius-sm) !important;
+	border-radius: var(--MI-radius-sm) !important;
 	background-color: black !important;
-	color: var(--accentLighten) !important;
+	color: var(--MI_THEME-accentLighten) !important;
 	font-size: 12px !important;
 }
 
@@ -455,9 +455,9 @@ onDeactivated(() => {
 	> i {
 		display: block;
 		position: absolute;
-		border-radius: var(--radius-sm);
-		background-color: var(--fg);
-		color: var(--accentLighten);
+		border-radius: var(--MI-radius-sm);
+		background-color: var(--MI_THEME-fg);
+		color: var(--MI_THEME-accentLighten);
 		font-size: 14px;
 		opacity: .5;
 		padding: 3px 6px;
@@ -518,7 +518,7 @@ onDeactivated(() => {
 			justify-content: center;
 			align-items: center;
 			background: rgba(64, 64, 64, 0.3);
-			backdrop-filter: var(--modalBgFilter);
+			backdrop-filter: var(--MI-modalBgFilter);
 			color: #fff;
 			font-size: 12px;
 
@@ -536,7 +536,7 @@ onDeactivated(() => {
 	> .controls {
 		display: flex;
 		width: 100%;
-		background-color: var(--bg);
+		background-color: var(--MI_THEME-bg);
 		z-index: 5;
 
 		> * {
@@ -546,11 +546,11 @@ onDeactivated(() => {
 		> button, a {
 			border: none;
 			background-color: transparent;
-			color: var(--accent);
+			color: var(--MI_THEME-accent);
 			cursor: pointer;
 
 			&:hover {
-				background-color: var(--fg);
+				background-color: var(--MI_THEME-fg);
 			}
 		}
 
@@ -578,11 +578,11 @@ onDeactivated(() => {
 				outline: none;
 
 				&::-webkit-slider-runnable-track {
-					background: var(--bg);
+					background: var(--MI_THEME-bg);
 				}
 
 				&::-ms-fill-lower, &::-ms-fill-upper {
-					background: var(--bg);
+					background: var(--MI_THEME-bg);
 				}
 			}
 
@@ -592,8 +592,8 @@ onDeactivated(() => {
 				cursor: pointer;
 				border-radius: 0;
 				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 				overflow-x: hidden;
 			}
 
@@ -602,10 +602,10 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 				cursor: pointer;
 				-webkit-appearance: none;
-				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
+				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
 				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
 				z-index: 1;
 			}
@@ -616,14 +616,14 @@ onDeactivated(() => {
 				cursor: pointer;
 				border-radius: 0;
 				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 			}
 
 			&::-moz-range-progress {
 				cursor: pointer;
 				height: 100%;
-				background: var(--accent);
+				background: var(--MI_THEME-accent);
 			}
 
 			&::-moz-range-thumb {
@@ -631,7 +631,7 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				width: 14px;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 				cursor: pointer;
 			}
 
@@ -647,14 +647,14 @@ onDeactivated(() => {
 			}
 
 			&::-ms-fill-lower {
-				background: var(--accent);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-accent);
+				border: 1px solid var(--MI_THEME-fg);
 				border-radius: 0;
 			}
 
 			&::-ms-fill-upper {
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 				border-radius: 0;
 			}
 
@@ -664,7 +664,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 				cursor: pointer;
 			}
 
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 025436f52f..eab5d45c89 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -158,7 +158,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</button>
 				<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()" @click.stop>
 					<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
-					<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
+					<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
 					<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
 					<i v-else class="ph-smiley ph-bold ph-lg"></i>
 					<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
@@ -930,7 +930,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 			padding: 0 4px;
 			margin-bottom: 0 !important;
 			background: var(--MI_THEME-popup);
-			border-radius: var(--radius-sm);
+			border-radius: var(--MI-radius-sm);
 			box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
 		}
 
@@ -977,7 +977,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: relative;
 	display: flex;
 	align-items: center;
-	padding: 24px 32px 0 calc(32px + var(--avatar) + 14px);
+	padding: 24px 32px 0 calc(32px + var(--MI-avatar) + 14px);
 	line-height: 28px;
 	white-space: pre;
 	color: var(--MI_THEME-renote);
@@ -986,9 +986,9 @@ function emitUpdReaction(emoji: string, delta: number) {
 		content: '';
 		position: absolute;
 		top: 0;
-		left: calc(32px + .5 * var(--avatar));
+		left: calc(32px + .5 * var(--MI-avatar));
 		bottom: -8px;
-		border-left: var(--thread-width) solid var(--MI_THEME-thread);
+		border-left: var(--MI-thread-width) solid var(--MI_THEME-thread);
 	}
 
 	&:first-child {
@@ -1077,9 +1077,9 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .collapsedInReplyToLine {
 	position: absolute;
-	left: calc(32px + .5 * var(--avatar));
+	left: calc(32px + .5 * var(--MI-avatar));
 	// using solid instead of dotted, stylelistic choice
-	border-left: var(--thread-width) solid var(--MI_THEME-thread);
+	border-left: var(--MI-thread-width) solid var(--MI_THEME-thread);
 	top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote)
 	height: 28px;
 }
@@ -1095,7 +1095,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	left: 8px;
 	width: 5px;
 	height: calc(100% - 16px);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	pointer-events: none;
 }
 
@@ -1104,8 +1104,8 @@ function emitUpdReaction(emoji: string, delta: number) {
 	display: block !important;
 	position: sticky !important;
 	margin: 0 14px 0 0;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 	position: sticky !important;
 	top: calc(22px + var(--MI-stickyTop, 0px));
 	left: 0;
@@ -1141,7 +1141,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	background: var(--MI_THEME-popup);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 
@@ -1171,7 +1171,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	background: var(--MI_THEME-panel);
 	padding: 6px 10px;
 	font-size: 0.8em;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 }
 
@@ -1211,7 +1211,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	padding: 16px;
 	// Made border solid, stylistic choice
 	border: solid 1px var(--MI_THEME-renote);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 
@@ -1247,14 +1247,14 @@ function emitUpdReaction(emoji: string, delta: number) {
 @container (max-width: 580px) {
 	.root {
 		font-size: 0.95em;
-		--avatar: 46px;
+		--MI-avatar: 46px;
 	}
 
 	.renote {
-		padding: 24px 26px 0 calc(26px + var(--avatar) + 14px);
+		padding: 24px 26px 0 calc(26px + var(--MI-avatar) + 14px);
 
 		&::before {
-			left: calc(26px + .5 * var(--avatar));
+			left: calc(26px + .5 * var(--MI-avatar));
 		}
 	}
 
@@ -1267,7 +1267,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyToLine {
-		left: calc(26px + .5 * var(--avatar));
+		left: calc(26px + .5 * var(--MI-avatar));
 	}
 
 	.article {
@@ -1289,26 +1289,26 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyToLine {
-		left: calc(25px + .5 * var(--avatar));
+		left: calc(25px + .5 * var(--MI-avatar));
 	}
 }
 
 @container (max-width: 500px) {
 	.renote {
-		padding: 23px 25px 0 calc(25px + var(--avatar) + 14px);
+		padding: 23px 25px 0 calc(25px + var(--MI-avatar) + 14px);
 
 		&::before {
-			left: calc(25px + .5 * var(--avatar));
+			left: calc(25px + .5 * var(--MI-avatar));
 		}
 	}
 }
 
 @container (max-width: 480px) {
 	.renote {
-		padding: 22px 24px 0 calc(24px + var(--avatar) + 14px);
+		padding: 22px 24px 0 calc(24px + var(--MI-avatar) + 14px);
 
 		&::before {
-			left: calc(24px + .5 * var(--avatar));
+			left: calc(24px + .5 * var(--MI-avatar));
 		}
 	}
 
@@ -1326,7 +1326,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyToLine {
-		left: calc(24px + .5 * var(--avatar));
+		left: calc(24px + .5 * var(--MI-avatar));
 		top: calc(22px + 28px); // 22px of .root padding, plus 28px of avatar height
 	}
 
@@ -1337,7 +1337,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 @container (max-width: 450px) {
 	.root {
-		--avatar: 44px;
+		--MI-avatar: 44px;
 	}
 
 	.avatar {
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 3fb8e76d51..7e718f1560 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -913,7 +913,7 @@ onUnmounted(() => {
 	width: 28px;
 	height: 28px;
 	margin: 0 8px 0 0;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .renoteText {
@@ -985,8 +985,8 @@ onUnmounted(() => {
 .noteHeaderAvatar {
 	display: block;
 	flex-shrink: 0;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 }
 
 .noteHeaderBody {
@@ -1010,7 +1010,7 @@ onUnmounted(() => {
 	font-size: 80%;
 	line-height: 1;
 	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .noteHeaderInfo {
@@ -1077,7 +1077,7 @@ onUnmounted(() => {
 .quoteNote {
 	padding: 16px;
 	border: solid 1px var(--MI_THEME-renote);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 
@@ -1162,7 +1162,7 @@ onUnmounted(() => {
 .reactionTab {
 	padding: 4px 6px;
 	border: solid 1px var(--MI_THEME-divider);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .reactionTabActive {
@@ -1221,7 +1221,7 @@ onUnmounted(() => {
 	margin: 0 10px 0 0 !important;
 	width: 40px !important;
 	height: 40px !important;
-	border-radius: var(--radius-sm) !important;
+	border-radius: var(--MI-radius-sm) !important;
 }
 
 .muted {
diff --git a/packages/frontend/src/components/SkNoteHeader.vue b/packages/frontend/src/components/SkNoteHeader.vue
index f31ec69dd9..6bcc30f6cb 100644
--- a/packages/frontend/src/components/SkNoteHeader.vue
+++ b/packages/frontend/src/components/SkNoteHeader.vue
@@ -189,7 +189,7 @@ const mock = inject<boolean>('mock', false);
 	padding: 1px 6px;
 	font-size: 80%;
 	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .username {
diff --git a/packages/frontend/src/components/SkNoteSimple.vue b/packages/frontend/src/components/SkNoteSimple.vue
index 4e8f6667d4..b9895305f2 100644
--- a/packages/frontend/src/components/SkNoteSimple.vue
+++ b/packages/frontend/src/components/SkNoteSimple.vue
@@ -61,7 +61,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	margin: 0 10px 0 0;
 	width: 34px;
 	height: 34px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	position: sticky !important;
 	top: calc(16px + var(--MI-stickyTop, 0px));
 	left: 0;
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 40f5c5f43c..3e9d2a780f 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -426,7 +426,7 @@ if (props.detail) {
 	padding: 28px 32px;
 	position: relative;
 
-	--reply-indent: calc(.5 * var(--avatar));
+	--reply-indent: calc(.5 * var(--MI-avatar));
 
 	&.children {
 		padding: 10px 0 0 8px;
@@ -434,16 +434,16 @@ if (props.detail) {
 
 	&.isReply {
 		/* @link https://utopia.fyi/clamp/calculator?a=450,580,26—36 */
-		--avatar: clamp(26px, -8.6154px + 7.6923cqi, 36px);
+		--MI-avatar: clamp(26px, -8.6154px + 7.6923cqi, 36px);
 	}
 }
 
 .line {
 	position: absolute;
-	left: calc(32px + .5 * var(--avatar));
+	left: calc(32px + .5 * var(--MI-avatar));
 	// using solid instead of dotted, stylelistic choice
-	border-left: var(--thread-width) solid var(--MI_THEME-thread);
-	top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
+	border-left: var(--MI-thread-width) solid var(--MI_THEME-thread);
+	top: calc(28px + var(--MI-avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
 	bottom: -28px;
 }
 
@@ -487,7 +487,7 @@ if (props.detail) {
 	left: 8px;
 	width: 5px;
 	height: calc(100% - 8px);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	pointer-events: none;
 }
 
@@ -495,9 +495,9 @@ if (props.detail) {
 	flex-shrink: 0;
 	display: block;
 	margin: 0 14px 0 0;
-	width: var(--avatar);
-	height: var(--avatar);
-	border-radius: var(--radius-sm);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
+	border-radius: var(--MI-radius-sm);
 }
 
 .body {
@@ -541,11 +541,11 @@ if (props.detail) {
 @container (max-width: 580px) {
 	.root {
 		padding: 28px 26px 0;
-		--avatar: 46px;
+		--MI-avatar: 46px;
 	}
 
 	.line {
-		left: calc(26px + .5 * var(--avatar));
+		left: calc(26px + .5 * var(--MI-avatar));
 	}
 }
 
@@ -555,8 +555,8 @@ if (props.detail) {
 	}
 
 	.line {
-		top: calc(23px + var(--avatar));
-		left: calc(25px + .5 * var(--avatar));
+		top: calc(23px + var(--MI-avatar));
+		left: calc(25px + .5 * var(--MI-avatar));
 	}
 }
 
@@ -605,14 +605,14 @@ if (props.detail) {
 	}
 
 	.line {
-		top: calc(22px + var(--avatar));
-		left: calc(24px + .5 * var(--avatar));
+		top: calc(22px + var(--MI-avatar));
+		left: calc(24px + .5 * var(--MI-avatar));
 	}
 }
 
 @container (max-width: 450px) {
 	.root {
-		--avatar: 44px;
+		--MI-avatar: 44px;
 	}
 }
 
@@ -621,7 +621,7 @@ if (props.detail) {
 	padding: 8px !important;
 	border: 1px solid var(--MI_THEME-divider);
 	margin: 8px 8px 0 8px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 // avatar container with line
@@ -633,7 +633,7 @@ if (props.detail) {
 .threadLine {
 	width: 0;
 	flex-grow: 1;
-	border-left: var(--thread-width) solid var(--MI_THEME-thread);
+	border-left: var(--MI-thread-width) solid var(--MI_THEME-thread);
 	margin-left: var(--reply-indent);
 }
 
@@ -642,10 +642,10 @@ if (props.detail) {
 }
 
 .reply:not(:last-child) {
-	border-left: var(--thread-width) solid var(--MI_THEME-thread);
+	border-left: var(--MI-thread-width) solid var(--MI_THEME-thread);
 
 	&::before {
-		left: calc(-1 * var(--thread-width));
+		left: calc(-1 * var(--MI-thread-width));
 	}
 }
 
@@ -654,10 +654,10 @@ if (props.detail) {
 	content: '';
 	left: 0px;
 	top: -10px;
-	height: calc(10px + 10px + .5 * var(--avatar));
+	height: calc(10px + 10px + .5 * var(--MI-avatar));
 	width: 15px;
-	border-left: var(--thread-width) solid var(--MI_THEME-thread);
-	border-bottom: var(--thread-width) solid var(--MI_THEME-thread);
+	border-left: var(--MI-thread-width) solid var(--MI_THEME-thread);
+	border-bottom: var(--MI-thread-width) solid var(--MI_THEME-thread);
 	border-bottom-left-radius: 15px;
 }
 
diff --git a/packages/frontend/src/components/SkOldNoteWindow.vue b/packages/frontend/src/components/SkOldNoteWindow.vue
index 3810b62366..48b9020402 100644
--- a/packages/frontend/src/components/SkOldNoteWindow.vue
+++ b/packages/frontend/src/components/SkOldNoteWindow.vue
@@ -182,8 +182,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 .noteHeaderAvatar {
 	display: block;
 	flex-shrink: 0;
-	width: var(--avatar);
-	height: var(--avatar);
+	width: var(--MI-avatar);
+	height: var(--MI-avatar);
 }
 
 .noteHeaderBody {
@@ -206,8 +206,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 	padding: 4px 6px;
 	font-size: 80%;
 	line-height: 1;
-	border: solid 0.5px var(--divider);
-	border-radius: var(--radius-xs);
+	border: solid 0.5px var(--MI_THEME-divider);
+	border-radius: var(--MI-radius-xs);
 }
 
 .noteHeaderInfo {
@@ -240,19 +240,19 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 }
 
 .noteReplyTarget {
-	color: var(--accent);
+	color: var(--MI_THEME-accent);
 	margin-right: 0.5em;
 }
 
 .rn {
 	margin-left: 4px;
 	font-style: oblique;
-	color: var(--renote);
+	color: var(--MI_THEME-renote);
 }
 
 .translation {
-	border: solid 0.5px var(--divider);
-	border-radius: var(--radius);
+	border: solid 0.5px var(--MI_THEME-divider);
+	border-radius: var(--MI-radius);
 	padding: 12px;
 	margin-top: 8px;
 }
@@ -267,8 +267,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 
 .quoteNote {
 	padding: 16px;
-	border: dashed 1px var(--renote);
-	border-radius: var(--radius-xs);
+	border: dashed 1px var(--MI_THEME-renote);
+	border-radius: var(--MI-radius-xs);
 	overflow: clip;
 }
 
@@ -287,7 +287,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 	}
 
 	&:hover {
-		color: var(--fgHighlighted);
+		color: var(--MI_THEME-fgHighlighted);
 	}
 }
 
diff --git a/packages/frontend/src/components/SkOneko.vue b/packages/frontend/src/components/SkOneko.vue
index 24bb392335..ef7bdd74f0 100644
--- a/packages/frontend/src/components/SkOneko.vue
+++ b/packages/frontend/src/components/SkOneko.vue
@@ -240,6 +240,6 @@ onMounted(init);
 	pointer-events: none;
 	image-rendering: pixelated;
 	z-index: 2147483647;
-	background-image: var(--oneko-image, url(/client-assets/oneko.gif));
+	background-image: var(--MI_THEME-oneko-image, url(/client-assets/oneko.gif));
 }
 </style>
diff --git a/packages/frontend/src/components/SkUserRecentNotes.vue b/packages/frontend/src/components/SkUserRecentNotes.vue
index 2cdb4b6586..f355facb51 100644
--- a/packages/frontend/src/components/SkUserRecentNotes.vue
+++ b/packages/frontend/src/components/SkUserRecentNotes.vue
@@ -94,7 +94,7 @@ onMounted(async () => {
 <style lang="scss" module>
 
 .panel {
-	background: var(--panel);
+	background: var(--MI_THEME-panel);
 }
 
 .userInfo {
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index 1cfde0c903..b8837d7133 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -61,7 +61,7 @@ const props = defineProps<{
 	box-sizing: border-box;
 	padding: 10px 14px;
 	background: var(--MI_THEME-folderHeaderBg);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	font-size: 0.9em;
 
 	&:hover {
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index 57af034354..fdfc429f4a 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -175,7 +175,7 @@ function reduceFrequency(): void {
 	display: block;
 	object-fit: contain;
 	margin: auto;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 }
 
 .i {
@@ -185,7 +185,7 @@ function reduceFrequency(): void {
 	display: grid;
 	place-content: center;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	padding: 2px;
 }
 
diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue
index 64c828ba4a..77dddaff89 100644
--- a/packages/frontend/src/components/global/MkError.vue
+++ b/packages/frontend/src/components/global/MkError.vue
@@ -44,6 +44,6 @@ const emit = defineEmits<{
   width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 }
 </style>
diff --git a/packages/frontend/src/components/global/MkMfm.ts b/packages/frontend/src/components/global/MkMfm.ts
index 90b3999092..a45e531932 100644
--- a/packages/frontend/src/components/global/MkMfm.ts
+++ b/packages/frontend/src/components/global/MkMfm.ts
@@ -362,7 +362,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 						const child = token.children[0];
 						const unixtime = parseInt(child.type === 'text' ? child.props.text : '');
 						return h('span', {
-							style: 'display: inline-block; font-size: 90%; border: solid 1px var(--MI_THEME-divider); border-radius: var(--radius-ellipse); padding: 4px 10px 4px 6px;',
+							style: 'display: inline-block; font-size: 90%; border: solid 1px var(--MI_THEME-divider); border-radius: var(--MI-radius-ellipse); padding: 4px 10px 4px 6px;',
 						}, [
 							h('i', {
 								class: 'ti ti-clock',
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index 20be1b8725..acf2933743 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -219,7 +219,7 @@ onUnmounted(() => {
 
 	&.active {
 		opacity: 1;
-		color: var(--accent);
+		color: var(--MI_THEME-accent);
 	}
 
 	&.animate {
@@ -249,7 +249,7 @@ onUnmounted(() => {
 	bottom: 0;
 	height: 3px;
 	background: var(--MI_THEME-accent);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	transition: none;
 	pointer-events: none;
 
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index cc7633dcff..18c97b1bdb 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -239,7 +239,7 @@ onUnmounted(() => {
 	width: calc(var(--height) - (var(--margin)));
 	box-sizing: border-box;
 	position: relative;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 
 	&:hover {
 		background: rgba(0, 0, 0, 0.05);
diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue
index 83f596b870..0bafc385a6 100644
--- a/packages/frontend/src/pages/_error_.vue
+++ b/packages/frontend/src/pages/_error_.vue
@@ -83,6 +83,6 @@ definePageMetadata(() => ({
 	vertical-align: bottom;
 	height: 128px;
 	margin-bottom: 24px;
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 }
 </style>
diff --git a/packages/frontend/src/pages/about-sharkey.vue b/packages/frontend/src/pages/about-sharkey.vue
index 7ebae62a7b..3b571475fb 100644
--- a/packages/frontend/src/pages/about-sharkey.vue
+++ b/packages/frontend/src/pages/about-sharkey.vue
@@ -266,7 +266,7 @@ definePageMetadata(() => ({
 .znqjceqz {
 	> .about {
 		position: relative;
-		border-radius: var(--radius);
+		border-radius: var(--MI-radius);
 
 		> .treasure {
 			position: absolute;
@@ -305,7 +305,7 @@ definePageMetadata(() => ({
 				display: block;
 				width: 80px;
 				margin: 0 auto;
-				border-radius: var(--radius-md);
+				border-radius: var(--MI-radius-md);
 				position: relative;
 				z-index: 1;
 				transform: translateX(-10%);
@@ -355,23 +355,23 @@ definePageMetadata(() => ({
 	display: flex;
 	align-items: center;
 	padding: 12px;
-	background: var(--buttonBg);
-	border-radius: var(--radius-sm);
+	background: var(--MI_THEME-buttonBg);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		text-decoration: none;
-		background: var(--buttonHoverBg);
+		background: var(--MI_THEME-buttonHoverBg);
 	}
 
 	&.active {
-		color: var(--accent);
-		background: var(--buttonHoverBg);
+		color: var(--MI_THEME-accent);
+		background: var(--MI_THEME-buttonHoverBg);
 	}
 }
 
 .contributorAvatar {
 	width: 30px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 }
 
 .contributorUsername {
@@ -388,13 +388,13 @@ definePageMetadata(() => ({
 	display: flex;
 	align-items: center;
 	padding: 12px;
-	background: var(--buttonBg);
-	border-radius: var(--radius-sm);
+	background: var(--MI_THEME-buttonBg);
+	border-radius: var(--MI-radius-sm);
 }
 
 .patronIcon {
 	width: 24px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 }
 
 .patronName {
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 42898b3447..347214c8fa 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -170,7 +170,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu
 <style lang="scss" module>
 .banner {
 	text-align: center;
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 	overflow: clip;
 	background-color: var(--MI_THEME-panel);
 	background-size: cover;
@@ -181,7 +181,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu
 	display: block;
 	margin: 16px auto 0 auto;
 	max-height: 96px;
-	border-radius: var(--radius-sm);;
+	border-radius: var(--MI-radius-sm);;
 }
 
 .bannerName {
@@ -220,7 +220,7 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu
 		font-weight: bold;
 		align-items: center;
 		justify-content: center;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 	}
 }
 
@@ -238,23 +238,23 @@ await misskeyApi('sponsors', { instance: true }).then((res) => sponsors.value.pu
 	display: flex;
 	align-items: center;
 	padding: 12px;
-	background: var(--buttonBg);
-	border-radius: var(--radius-sm);
+	background: var(--MI_THEME-buttonBg);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		text-decoration: none;
-		background: var(--buttonHoverBg);
+		background: var(--MI_THEME-buttonHoverBg);
 	}
 
 	&.active {
-		color: var(--accent);
-		background: var(--buttonHoverBg);
+		color: var(--MI_THEME-accent);
+		background: var(--MI_THEME-buttonHoverBg);
 	}
 }
 
 .contributorAvatar {
 	width: 30px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 }
 
 .contributorUsername {
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index f63b81c393..f4421855de 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -605,7 +605,7 @@ definePageMetadata(() => ({
 			> .suspended, > .silenced, > .moderator {
 				display: inline-block;
 				border: solid 1px;
-				border-radius: var(--radius-sm);
+				border-radius: var(--MI-radius-sm);
 				padding: 2px 6px;
 				font-size: 85%;
 			}
@@ -644,13 +644,13 @@ definePageMetadata(() => ({
 
 .casdwq {
 	.silenced {
-		color: var(--warn);
-		border-color: var(--warn);
+		color: var(--MI_THEME-warn);
+		border-color: var(--MI_THEME-warn);
 	}
 
 	.moderator {
-		color: var(--success);
-		border-color: var(--success);
+		color: var(--MI_THEME-success);
+		border-color: var(--MI_THEME-success);
 	}
 }
 </style>
@@ -694,7 +694,7 @@ definePageMetadata(() => ({
 .announcementItem {
 	display: flex;
 	padding: 8px 12px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	cursor: pointer;
 }
 </style>
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
index b061b2fa0c..b0651150a6 100644
--- a/packages/frontend/src/pages/admin/_header_.vue
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -182,7 +182,7 @@ onUnmounted(() => {
 			width: calc(var(--height) - (var(--margin) * 2));
 			box-sizing: border-box;
 			position: relative;
-			border-radius: var(--radius-xs);
+			border-radius: var(--MI-radius-xs);
 
 			&:hover {
 				background: rgba(0, 0, 0, 0.05);
@@ -287,7 +287,7 @@ onUnmounted(() => {
 			bottom: 0;
 			height: 3px;
 			background: var(--MI_THEME-accent);
-			border-radius: var(--radius-ellipse);
+			border-radius: var(--MI-radius-ellipse);
 			transition: all 0.2s ease;
 			pointer-events: none;
 		}
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index 1fb49d51d9..a1cd1af102 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -366,7 +366,7 @@ defineExpose({
 					display: block;
 					margin: auto;
 					height: 42px;
-					border-radius: var(--radius-sm);
+					border-radius: var(--MI-radius-sm);
 				}
 			}
 		}
diff --git a/packages/frontend/src/pages/admin/modlog.ModLog.vue b/packages/frontend/src/pages/admin/modlog.ModLog.vue
index 8af8d29e1a..37a9cc83e7 100644
--- a/packages/frontend/src/pages/admin/modlog.ModLog.vue
+++ b/packages/frontend/src/pages/admin/modlog.ModLog.vue
@@ -215,7 +215,7 @@ const props = defineProps<{
 .diff {
 	background: #fff;
 	color: #000;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/admin/overview.federation.vue b/packages/frontend/src/pages/admin/overview.federation.vue
index 1ada4a5251..9062c73ff6 100644
--- a/packages/frontend/src/pages/admin/overview.federation.vue
+++ b/packages/frontend/src/pages/admin/overview.federation.vue
@@ -153,7 +153,7 @@ onMounted(async () => {
 					margin-right: 12px;
 					background: var(--MI_THEME-accentedBg);
 					color: var(--MI_THEME-accent);
-					border-radius: var(--radius);
+					border-radius: var(--MI-radius);
 				}
 
 				&.sub {
diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue
index 12f2c82ff7..a967b305f7 100644
--- a/packages/frontend/src/pages/admin/overview.stats.vue
+++ b/packages/frontend/src/pages/admin/overview.stats.vue
@@ -116,7 +116,7 @@ onMounted(async () => {
 				margin-right: 12px;
 				background: var(--MI_THEME-accentedBg);
 				color: var(--MI_THEME-accent);
-				border-radius: var(--radius);
+				border-radius: var(--MI-radius);
 			}
 
 			&.users {
diff --git a/packages/frontend/src/pages/admin/server-rules.vue b/packages/frontend/src/pages/admin/server-rules.vue
index 1ce7190d9c..6c1227b3cf 100644
--- a/packages/frontend/src/pages/admin/server-rules.vue
+++ b/packages/frontend/src/pages/admin/server-rules.vue
@@ -104,7 +104,7 @@ definePageMetadata(() => ({
 	height: 28px;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	margin-right: 8px;
 }
 
@@ -119,7 +119,7 @@ definePageMetadata(() => ({
 	height: 40px;
 	color: var(--MI_THEME-error);
 	margin-left: auto;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		background: var(--MI_THEME-X5);
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
index fbfbb6edf7..350f772d65 100644
--- a/packages/frontend/src/pages/antenna-timeline.vue
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -111,7 +111,7 @@ definePageMetadata(() => ({
 	display: block;
 	margin: var(--MI-margin) auto 0 auto;
 	padding: 8px 16px;
-	border-radius: var(--radius-xl);
+	border-radius: var(--MI-radius-xl);
 }
 
 .tl {
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 6193e8857e..9cd2546312 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -352,7 +352,7 @@ definePageMetadata(() => ({
 	padding: 8px 12px;
 	font-size: 80%;
 	background: rgba(0, 0, 0, 0.7);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	color: #fff;
 }
 
@@ -367,7 +367,7 @@ definePageMetadata(() => ({
 	left: 16px;
 	background: rgba(0, 0, 0, 0.7);
 	color: var(--MI_THEME-warn);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	font-weight: bold;
 	font-size: 1em;
 	padding: 4px 7px;
diff --git a/packages/frontend/src/pages/drive.file.info.vue b/packages/frontend/src/pages/drive.file.info.vue
index 604abba562..9d74a47ec6 100644
--- a/packages/frontend/src/pages/drive.file.info.vue
+++ b/packages/frontend/src/pages/drive.file.info.vue
@@ -258,7 +258,7 @@ onMounted(async () => {
 
 	.fileQuickActionsOthersButton {
 		padding: .5rem;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 
 		&:hover,
 		&:focus-visible {
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index 7bcd5addef..beb8914d65 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -212,7 +212,7 @@ async function del() {
 
 .imgContainer {
 	padding: 8px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .img {
diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue
index 458642699e..d2d9b2a226 100644
--- a/packages/frontend/src/pages/emojis.emoji.vue
+++ b/packages/frontend/src/pages/emojis.emoji.vue
@@ -59,7 +59,7 @@ function menu(ev) {
 	padding: 12px;
 	text-align: left;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		border-color: var(--MI_THEME-accent);
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index 400dfdbe6d..ffa1e648c7 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -115,7 +115,7 @@ definePageMetadata(() => ({
 			margin: 0 12px 0 0;
 			width: 42px;
 			height: 42px;
-			border-radius: var(--radius-sm);
+			border-radius: var(--MI-radius-sm);
 		}
 
 		> .body {
diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index d45f572739..c3ab149ec2 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -226,7 +226,7 @@ definePageMetadata(() => ({
 
 	// The universal layout inserts a "spacer" thing that causes a stray scroll bar.
 	// We have to create fake "space" for it to "roll up" and back into the viewport, which removes the scrollbar.
-	margin-bottom: calc(-1 * var(--minBottomSpacing));
+	margin-bottom: calc(-1 * var(--MI-minBottomSpacing));
 
 	// Some "just in case" backup properties.
 	// These should not be needed, but help to maintain the layout if the above trick ever stops working.
@@ -277,6 +277,6 @@ definePageMetadata(() => ({
 }
 
 .panel {
-	background: var(--panel);
+	background: var(--MI_THEME-panel);
 }
 </style>
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index 78d765df80..96aebb14d2 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -461,7 +461,7 @@ definePageMetadata(() => ({
 		display: block;
 		margin: 0 16px 0 0;
 		height: 64px;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 	}
 
 	> .name {
diff --git a/packages/frontend/src/pages/invite.vue b/packages/frontend/src/pages/invite.vue
index ef485a9446..47f6e497b5 100644
--- a/packages/frontend/src/pages/invite.vue
+++ b/packages/frontend/src/pages/invite.vue
@@ -115,6 +115,6 @@ definePageMetadata(() => ({
 	width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 }
 </style>
diff --git a/packages/frontend/src/pages/list.vue b/packages/frontend/src/pages/list.vue
index cab807d610..2bcf16e668 100644
--- a/packages/frontend/src/pages/list.vue
+++ b/packages/frontend/src/pages/list.vue
@@ -143,7 +143,7 @@ definePageMetadata(() => ({
   width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 }
 
 .button {
diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue
index 607843892e..540cb34904 100644
--- a/packages/frontend/src/pages/my-antennas/index.vue
+++ b/packages/frontend/src/pages/my-antennas/index.vue
@@ -74,7 +74,7 @@ onActivated(() => {
 	display: block;
 	padding: 16px;
 	border: solid 1px var(--MI_THEME-divider);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		border: solid 1px var(--MI_THEME-accent);
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index a6e1f12d8a..d08f6fec5a 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -86,7 +86,7 @@ onActivated(() => {
 	display: block;
 	padding: 16px;
 	border: solid 1px var(--MI_THEME-divider);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	margin-bottom: 8px;
 
 	&:hover {
diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue
index 28b224f752..1739c2fc00 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.container.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.container.vue
@@ -62,7 +62,7 @@ function remove() {
 	overflow: hidden;
 	background: var(--MI_THEME-panel);
 	border: solid 2px var(--MI_THEME-X12);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	&:hover {
 		border: solid 2px var(--MI_THEME-X13);
diff --git a/packages/frontend/src/pages/role.vue b/packages/frontend/src/pages/role.vue
index 9ee3fd7f01..9855442088 100644
--- a/packages/frontend/src/pages/role.vue
+++ b/packages/frontend/src/pages/role.vue
@@ -115,6 +115,6 @@ definePageMetadata(() => ({
   width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 }
 </style>
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
index 5c59f4cbe4..518f906d2f 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue
@@ -45,7 +45,7 @@ const emit = defineEmits<{
 	cursor: pointer;
 	padding: 16px 16px 28px 16px;
 	border: solid 2px var(--MI_THEME-divider);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	text-align: center;
 	font-size: 90%;
 	overflow: clip;
diff --git a/packages/frontend/src/pages/settings/drive-cleaner.vue b/packages/frontend/src/pages/settings/drive-cleaner.vue
index 4054cd810a..1ad3613e4b 100644
--- a/packages/frontend/src/pages/settings/drive-cleaner.vue
+++ b/packages/frontend/src/pages/settings/drive-cleaner.vue
@@ -197,7 +197,7 @@ definePageMetadata(() => ({
 	height: 12px;
 	background: rgba(0, 0, 0, 0.1);
 	overflow: clip;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 }
 
 .meterValue {
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
index c1e3258631..eef2e5b505 100644
--- a/packages/frontend/src/pages/settings/drive.vue
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -152,12 +152,12 @@ definePageMetadata(() => ({
 .meter {
 	height: 10px;
 	background: rgba(0, 0, 0, 0.1);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	overflow: clip;
 }
 
 .meterValue {
 	height: 100%;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 }
 </style>
diff --git a/packages/frontend/src/pages/settings/emoji-picker.vue b/packages/frontend/src/pages/settings/emoji-picker.vue
index eb5424ea6c..7ddc1eab71 100644
--- a/packages/frontend/src/pages/settings/emoji-picker.vue
+++ b/packages/frontend/src/pages/settings/emoji-picker.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div class="_gaps">
 			<div>
-				<div v-panel style="border-radius: var(--radius-sm);">
+				<div v-panel style="border-radius: var(--MI-radius-sm);">
 					<Sortable
 						v-model="pinnedEmojisForReaction"
 						:class="$style.emojis"
@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div class="_gaps">
 			<div>
-				<div v-panel style="border-radius: var(--radius-sm);">
+				<div v-panel style="border-radius: var(--MI-radius-sm);">
 					<Sortable
 						v-model="pinnedEmojis"
 						:class="$style.emojis"
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 34a0245406..9f7842ecdc 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -175,7 +175,7 @@ definePageMetadata(() => ({
 
 <style lang="scss" scoped>
 .rfqxtzch {
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 
 	> .toggle {
 		position: relative;
@@ -255,7 +255,7 @@ definePageMetadata(() => ({
 				background-color: #E8CDA5;
 				opacity: 0;
 				transition: opacity 200ms ease-in-out !important;
-				border-radius: var(--radius-full);
+				border-radius: var(--MI-radius-full);
 			}
 
 			.crater--1 {
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index 21f4548d2e..a530f4b5d6 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -236,7 +236,7 @@ definePageMetadata(() => ({
 				position: relative;
 				width: 64px;
 				height: 64px;
-				border-radius: var(--radius-sm);
+				border-radius: var(--MI-radius-sm);
 
 				> .preview {
 					position: absolute;
@@ -247,7 +247,7 @@ definePageMetadata(() => ({
 					margin: auto;
 					width: 42px;
 					height: 42px;
-					border-radius: var(--radius-xs);
+					border-radius: var(--MI-radius-xs);
 					box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
 					transition: transform 0.15s ease;
 				}
@@ -263,10 +263,10 @@ definePageMetadata(() => ({
 				}
 
 				&.rounded {
-					border-radius: var(--radius-ellipse);
+					border-radius: var(--MI-radius-ellipse);
 
 					> .preview {
-						border-radius: var(--radius-ellipse);
+						border-radius: var(--MI-radius-ellipse);
 					}
 				}
 
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 92bfd9cdf1..c8e12e2542 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -377,7 +377,7 @@ definePageMetadata(() => ({
 	display: block;
 	margin: var(--MI-margin) auto 0 auto;
 	padding: 8px 16px;
-	border-radius: var(--radius-xl);
+	border-radius: var(--MI-radius-xl);
 }
 
 .postForm {
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
index d7326f0195..85e44b2503 100644
--- a/packages/frontend/src/pages/user-list-timeline.vue
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -128,7 +128,7 @@ definePageMetadata(() => ({
 	display: block;
 	margin: var(--MI-margin) auto 0 auto;
 	padding: 8px 16px;
-	border-radius: var(--radius-xl);
+	border-radius: var(--MI-radius-xl);
 }
 
 .tl {
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 30ecbd5100..38dc568f82 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -423,7 +423,7 @@ onUnmounted(() => {
 	background-size: cover;
 	background-position: center;
 	pointer-events: none;
-	filter: var(--blur, blur(10px)) opacity(0.6);
+	filter: var(--MI-blur, blur(10px)) opacity(0.6);
 	// Funny CSS schenanigans to make background escape container
 	left: -100%;
 	top: -5%;
@@ -446,7 +446,7 @@ onUnmounted(() => {
 			> .main {
 				position: relative;
 				overflow: clip;
-				background: color-mix(in srgb, var(--panel) 65%, transparent);
+				background: color-mix(in srgb, var(--MI_THEME-panel) 65%, transparent);
 
 				> .banner-container {
 					position: relative;
@@ -481,7 +481,7 @@ onUnmounted(() => {
 						backdrop-filter: var(--MI-blur, blur(8px));
 						background: rgba(0, 0, 0, 0.2);
 						padding: 8px;
-						border-radius: var(--radius-lg);
+						border-radius: var(--MI-radius-lg);
 
 						> .menu {
 							vertical-align: bottom;
@@ -534,7 +534,7 @@ onUnmounted(() => {
 								color: #fff;
 								-webkit-backdrop-filter: var(--MI-blur, blur(8px));
 								backdrop-filter: var(--MI-blur, blur(8px));
-								border-radius: var(--radius-lg);
+								border-radius: var(--MI-radius-lg);
 								padding: 4px 8px;
 								font-size: 80%;
 							}
@@ -594,7 +594,7 @@ onUnmounted(() => {
 
 					> .role {
 						border: solid 1px var(--color, var(--MI_THEME-divider));
-						border-radius: var(--radius-ellipse);
+						border-radius: var(--MI-radius-ellipse);
 						margin-right: 4px;
 						padding: 3px 8px;
 					}
@@ -609,7 +609,7 @@ onUnmounted(() => {
 					background: transparent;
 					color: var(--MI_THEME-fg);
 					border: 1px solid var(--MI_THEME-divider);
-					border-radius: var(--radius-sm);
+					border-radius: var(--MI-radius-sm);
 					padding: 8px;
 					line-height: 0;
 
@@ -819,12 +819,12 @@ onUnmounted(() => {
 .tab {
 	margin-bottom: calc(var(--margin) / 2);
 	padding: calc(var(--margin) / 2) 0;
-	background: color-mix(in srgb, var(--bg) 65%, transparent);
-	backdrop-filter: var(--blur, blur(15px));
-	border-radius: var(--radius-sm);
+	background: color-mix(in srgb, var(--MI_THEME-bg) 65%, transparent);
+	backdrop-filter: var(--MI-blur, blur(15px));
+	border-radius: var(--MI-radius-sm);
 
 	> button {
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 		margin-left: 0.4rem;
 		margin-right: 0.4rem;
 	}
@@ -836,7 +836,7 @@ onUnmounted(() => {
 }
 
 .pinnedNote:not(:last-child) {
-	border-bottom: solid 0.5px var(--divider);
+	border-bottom: solid 0.5px var(--MI_THEME-divider);
 }
 
 .infoBadges {
@@ -855,7 +855,7 @@ onUnmounted(() => {
 		color: #fff;
 		background: rgba(0, 0, 0, 0.7);
 		font-size: 0.7em;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 		list-style-type: none;
 		margin-left: 0;
 	}
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index 23fd4ca23e..7fe90da865 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -96,7 +96,7 @@ onMounted(() => {
 .img {
 	position: relative;
 	height: 128px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/pages/user/lists.vue b/packages/frontend/src/pages/user/lists.vue
index 46af3f7f37..a3d1974ced 100644
--- a/packages/frontend/src/pages/user/lists.vue
+++ b/packages/frontend/src/pages/user/lists.vue
@@ -45,7 +45,7 @@ const pagination = {
 	display: block;
 	padding: 16px;
 	border: solid 1px var(--MI_THEME-divider);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	margin-bottom: 8px;
 
 	&:hover {
diff --git a/packages/frontend/src/pages/user/raw.vue b/packages/frontend/src/pages/user/raw.vue
index 4499eec10a..f24a215afc 100644
--- a/packages/frontend/src/pages/user/raw.vue
+++ b/packages/frontend/src/pages/user/raw.vue
@@ -107,7 +107,7 @@ const suspended = computed(() => props.user.isSuspended ?? false);
 	> .moderator {
 		display: inline-block;
 		border: solid 1px;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 		padding: 2px 6px;
 		font-size: 85%;
 	}
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index f6b7557e6d..f1842255e0 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -167,7 +167,7 @@ misskeyApiGet('federation/instances', {
 		background: var(--MI_THEME-acrylicPanel);
 		-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 		backdrop-filter: var(--MI-blur, blur(15px));
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 		overflow: clip;
 		width: 800px;
 		padding: 8px 0;
@@ -187,14 +187,14 @@ misskeyApiGet('federation/instances', {
 	padding: 6px 12px 6px 6px;
 	margin: 0 10px 0 0;
 	background: var(--MI_THEME-panel);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 
 	> :global(.icon) {
 		display: inline-block;
 		width: 20px;
 		height: 20px;
 		margin-right: 5px;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 	}
 }
 </style>
diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue
index 5a03483d0c..460a225f23 100644
--- a/packages/frontend/src/pages/welcome.timeline.note.vue
+++ b/packages/frontend/src/pages/welcome.timeline.note.vue
@@ -92,7 +92,7 @@ onUpdated(() => {
 	padding: 16px;
 	margin: 0 0 0 auto;
 	max-width: max-content;
-	border-radius: var(--radius-md);
+	border-radius: var(--MI-radius-md);
 }
 
 .reactions {
diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts
index a5972276e2..1f62c9ca70 100644
--- a/packages/frontend/src/scripts/favicon-dot.ts
+++ b/packages/frontend/src/scripts/favicon-dot.ts
@@ -78,7 +78,7 @@ class FavIconDot {
 		this.ctx.beginPath();
 		this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
 		const computedStyle = getComputedStyle(document.documentElement);
-		this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--navIndicator')).toHexString();
+		this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--MI_THEME-navIndicator')).toHexString();
 		this.ctx.strokeStyle = 'white';
 		this.ctx.fill();
 		this.ctx.stroke();
@@ -104,7 +104,7 @@ class FavIconDot {
 			this.drawDot();
 			this.canvas.toDataURL('image/png');
 		} catch (error) {
-			return false;			
+			return false;
 		}
 		return true;
 	}
@@ -140,6 +140,6 @@ export async function worksOnInstance() {
 		icon = new FavIconDot();
 		await icon.setup();
 	}
-	
+
 	return await icon.worksOnInstance();
 }
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 116e650666..bc20985a72 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -15,16 +15,15 @@
  */
 
 :root {
-	--radius-xs: 5px;
-	--radius-sm: 5px;
-	--radius: 5px;
-	--radius-md: 5px;
-	--radius-lg: 5px;
-	--radius-xl: 5px;
-	--radius-ellipse: 5px;
-	--radius-full: 5px;
+	--MI-radius-xs: 5px;
+	--MI-radius-sm: 5px;
+	--MI-radius: 5px;
+	--MI-radius-md: 5px;
+	--MI-radius-lg: 5px;
+	--MI-radius-xl: 5px;
+	--MI-radius-ellipse: 5px;
+	--MI-radius-full: 5px;
 
-	--MI-radius: 12px;
 	--MI-marginFull: 16px;
 	--MI-marginHalf: 10px;
 
@@ -38,19 +37,19 @@
 		--MI-margin: var(--MI-marginHalf);
 	}
 
-	--avatar: 48px;
-	--thread-width: 2px;
+	--MI-avatar: 48px;
+	--MI-thread-width: 2px;
 }
 
 html.radius-misskey {
-	--radius-xs: 4px;
-	--radius-sm: 8px;
-	--radius: 12px;
-	--radius-md: 16px;
-	--radius-lg: 24px;
-	--radius-xl: 32px;
-	--radius-ellipse: 999px;
-	--radius-full: 100%;
+	--MI-radius-xs: 4px;
+	--MI-radius-sm: 8px;
+	--MI-radius: 12px;
+	--MI-radius-md: 16px;
+	--MI-radius-lg: 24px;
+	--MI-radius-xl: 32px;
+	--MI-radius-ellipse: 999px;
+	--MI-radius-full: 100%;
 }
 
 ::selection {
@@ -197,7 +196,7 @@ rt {
 	display: inline-block;
 	width: 1em;
 	height: 1em;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	background: currentColor;
 }
 
@@ -210,7 +209,7 @@ rt {
 	min-width: 1em;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 	padding: 0.3em 0.5em;
 }
 
@@ -400,7 +399,7 @@ rt {
 	padding: 2px 3px;
 	color: var(--MI_THEME-accent);
 	border: solid 1px var(--MI_THEME-accent);
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 	vertical-align: top;
 }
 
@@ -450,7 +449,7 @@ rt {
 		vertical-align: bottom;
 		height: 128px;
 		margin-bottom: 16px;
-		border-radius: var(--radius-md);
+		border-radius: var(--MI-radius-md);
 	}
 }
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index c8c0915dc9..aa72de6089 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -159,7 +159,7 @@ function more() {
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: var(--radius-ellipse);
+		border-radius: var(--MI-radius-ellipse);
 		background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 	}
 
@@ -246,7 +246,7 @@ function more() {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border-radius: var(--radius-ellipse);
+			border-radius: var(--MI-radius-ellipse);
 			background: var(--MI_THEME-accentedBg);
 		}
 	}
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 9481a99231..a5e6a238ae 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -220,7 +220,7 @@ function more(ev: MouseEvent) {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border-radius: var(--radius-ellipse);
+			border-radius: var(--MI-radius-ellipse);
 			background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 		}
 
@@ -339,7 +339,7 @@ function more(ev: MouseEvent) {
 				left: 0;
 				right: 0;
 				bottom: 0;
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 				background: var(--MI_THEME-accentedBg);
 			}
 		}
@@ -438,7 +438,7 @@ function more(ev: MouseEvent) {
 			margin: auto;
 			width: 52px;
 			aspect-ratio: 1/1;
-			border-radius: var(--radius-full);
+			border-radius: var(--MI-radius-full);
 			background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 		}
 
@@ -534,7 +534,7 @@ function more(ev: MouseEvent) {
 				left: 0;
 				right: 0;
 				bottom: 0;
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 				background: var(--MI_THEME-accentedBg);
 			}
 
diff --git a/packages/frontend/src/ui/_common_/notification.vue b/packages/frontend/src/ui/_common_/notification.vue
index 29ae04387a..2d527c1a65 100644
--- a/packages/frontend/src/ui/_common_/notification.vue
+++ b/packages/frontend/src/ui/_common_/notification.vue
@@ -22,7 +22,7 @@ defineProps<{
 <style lang="scss" module>
 .root {
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	overflow: clip;
 	contain: content;
 }
diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue
index d15c497645..12de579d90 100644
--- a/packages/frontend/src/ui/_common_/upload.vue
+++ b/packages/frontend/src/ui/_common_/upload.vue
@@ -40,7 +40,7 @@ const zIndex = os.claimZIndex('high');
 	padding: 16px 20px;
 	pointer-events: none;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 .mk-uploader:empty {
   display: none;
@@ -116,7 +116,7 @@ const zIndex = os.claimZIndex('high');
   display: block;
   background: transparent;
   border: none;
-  border-radius: var(--radius-xs);
+  border-radius: var(--MI-radius-xs);
   overflow: hidden;
   grid-column: 2/3;
   grid-row: 2/3;
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index dfd6c7bf6f..0d82558a00 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -441,7 +441,7 @@ body {
 	width: 100%;
 	max-width: 60px;
 	margin: auto;
-	border-radius: var(--radius-lg);
+	border-radius: var(--MI-radius-lg);
 	background: transparent;
 	color: var(--MI_THEME-fg);
 
@@ -467,7 +467,7 @@ body {
 
 	&:active {
 		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-		color: var(--fgOnAccent);
+		color: var(--MI_THEME-fgOnAccent);
 	}
 }
 
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index d89c322c72..2eb232096e 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -287,7 +287,7 @@ function onDrop(ev) {
 	height: 100%;
 	overflow: clip;
 	contain: strict;
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 
 	&.draghover {
 		&::after {
@@ -388,7 +388,7 @@ function onDrop(ev) {
 	width: 3px;
 	height: calc(100% - 24px);
 	background: var(--MI_THEME-accent);
-	border-radius: var(--radius-ellipse);
+	border-radius: var(--MI-radius-ellipse);
 }
 
 .tabShape {
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 0b3f5875f2..c552b65318 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -353,7 +353,7 @@ $widgets-hide-threshold: 1090px;
 	right: 32px;
 	width: 64px;
 	height: 64px;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
 	font-size: 22px;
 	background: var(--MI_THEME-panel);
@@ -413,7 +413,7 @@ $widgets-hide-threshold: 1090px;
 	width: 100%;
 	max-width: 60px;
 	margin: auto;
-	border-radius: var(--radius-lg);
+	border-radius: var(--MI-radius-lg);
 	background: transparent;
 	color: var(--MI_THEME-fg);
 
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 371eba4540..f048ac2124 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -281,7 +281,7 @@ defineExpose({
 				padding: 10px;
 				box-sizing: border-box;
 				text-align: center;
-				border-radius: var(--radius-ellipse);
+				border-radius: var(--MI-radius-ellipse);
 
 				&._button {
 					background: var(--MI_THEME-panel);
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 7c2a6cc729..757aa6669d 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -80,7 +80,7 @@ document.documentElement.style.overflowY = 'scroll';
 	width: 100%;
 	max-width: 60px;
 	margin: auto;
-	border-radius: var(--radius-full);
+	border-radius: var(--MI-radius-full);
 	background: var(--MI_THEME-panel);
 	color: var(--MI_THEME-fg);
 	right: var(--MI-margin);
diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue
index 6a1fcfa1a6..946124058c 100644
--- a/packages/frontend/src/widgets/WidgetAiscript.vue
+++ b/packages/frontend/src/widgets/WidgetAiscript.vue
@@ -145,7 +145,7 @@ defineExpose<WidgetComponentExpose>({
 		padding: 0 10px;
 		height: 28px;
 		outline: none;
-		border-radius: var(--radius-xs);
+		border-radius: var(--MI-radius-xs);
 
 		&:disabled {
 			opacity: 0.7;
diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
index 2387cb1ab4..a3fe93f025 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.vue
+++ b/packages/frontend/src/widgets/WidgetCalendar.vue
@@ -208,7 +208,7 @@ defineExpose<WidgetComponentExpose>({
 	width: 100%;
 	overflow: hidden;
 	background: var(--MI_THEME-X11);
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 }
 
 .meterVal {
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index 3632975048..260dd06c13 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -112,7 +112,7 @@ defineExpose<WidgetComponentExpose>({
 				width: ($bodyTitleHieght + $bodyInfoHieght);
 				height: ($bodyTitleHieght + $bodyInfoHieght);
 				object-fit: cover;
-				border-radius: var(--radius-xs);
+				border-radius: var(--MI-radius-xs);
 				margin-right: 8px;
 			}
 
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index 014cf01a5d..b99f9bdb2b 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -66,7 +66,7 @@ defineExpose<WidgetComponentExpose>({
 	display: inline-block;
 	width: 60px;
 	height: 60px;
-	border-radius: var(--radius-sm);
+	border-radius: var(--MI-radius-sm);
 	box-sizing: border-box;
 	border: solid 3px #fff;
 }
diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue
index 82e03c1c65..5addf1066d 100644
--- a/packages/frontend/src/widgets/WidgetMemo.vue
+++ b/packages/frontend/src/widgets/WidgetMemo.vue
@@ -107,7 +107,7 @@ defineExpose<WidgetComponentExpose>({
 	padding: 0 10px;
 	height: 28px;
 	outline: none;
-	border-radius: var(--radius-xs);
+	border-radius: var(--MI-radius-xs);
 
 	&:disabled {
 		opacity: 0.7;
diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue
index 86ece91de6..17bdb156f2 100644
--- a/packages/frontend/src/widgets/WidgetPhotos.vue
+++ b/packages/frontend/src/widgets/WidgetPhotos.vue
@@ -102,7 +102,7 @@ defineExpose<WidgetComponentExpose>({
 
 	.img {
 		border: solid 4px transparent;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 	}
 }
 
@@ -121,7 +121,7 @@ defineExpose<WidgetComponentExpose>({
 		background-size: cover;
 		background-clip: content-box;
 		border: solid 2px transparent;
-		border-radius: var(--radius-xs);
+		border-radius: var(--MI-radius-xs);
 	}
 }
 </style>
diff --git a/packages/frontend/src/widgets/WidgetSearch.vue b/packages/frontend/src/widgets/WidgetSearch.vue
index 1a328be7ce..974536e880 100644
--- a/packages/frontend/src/widgets/WidgetSearch.vue
+++ b/packages/frontend/src/widgets/WidgetSearch.vue
@@ -176,6 +176,6 @@ defineExpose<WidgetComponentExpose>({
 
 <style lang="scss" scoped>
 .skw-search {
-	border-radius: var(--radius-sm) !important;
+	border-radius: var(--MI-radius-sm) !important;
 }
 </style>
-- 
cgit v1.2.3-freya


From 78cfcf023ad9671bd2ef2c3b27a7dd40e97abedc Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Fri, 22 Nov 2024 12:43:31 +0000
Subject: copy from MkNoteDetailed to SkNoteDetailed

---
 .../frontend/src/components/SkNoteDetailed.vue     | 41 +++++++++++++++++-----
 1 file changed, 33 insertions(+), 8 deletions(-)

(limited to 'packages/frontend/src/components/SkNoteDetailed.vue')

diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 7e718f1560..9559696ae1 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -58,7 +58,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<img v-for="role in appearNote.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
 						</span>
 					</div>
-					<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
+					<div :class="$style.noteHeaderUsernameAndBadgeRoles">
+						<div :class="$style.noteHeaderUsername">
+							<MkAcct :user="appearNote.user"/>
+						</div>
+						<div v-if="appearNote.user.badgeRoles" :class="$style.noteHeaderBadgeRoles">
+							<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div style="display: flex; align-items: flex-end; margin-left: auto;">
@@ -244,6 +251,7 @@ import { computed, inject, onMounted, onUnmounted, onUpdated, provide, ref, shal
 import * as mfm from '@transfem-org/sfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
+import { host } from '@@/js/config.js';
 import SkNoteSub from '@/components/SkNoteSub.vue';
 import SkNoteSimple from '@/components/SkNoteSimple.vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
@@ -267,7 +275,6 @@ import { reactionPicker } from '@/scripts/reaction-picker.js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
-import { host } from '@@/js/config.js';
 import { getNoteClipMenu, getNoteMenu } from '@/scripts/get-note-menu.js';
 import { getNoteVersionsMenu } from '@/scripts/get-note-versions-menu.js';
 import { useNoteCapture } from '@/scripts/use-note-capture.js';
@@ -515,7 +522,7 @@ if (appearNote.value.reactionAcceptance === 'likeOnly') {
 }
 
 function renote(visibility: Visibility, localOnly: boolean = false) {
-	pleaseLogin(undefined, pleaseLoginContext.value);
+	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
 
 	renoting = true;
@@ -561,7 +568,7 @@ function renote(visibility: Visibility, localOnly: boolean = false) {
 }
 
 function quote() {
-	pleaseLogin(undefined, pleaseLoginContext.value);
+	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
 
 	if (appearNote.value.channel) {
@@ -619,7 +626,7 @@ function quote() {
 }
 
 function reply(): void {
-	pleaseLogin(undefined, pleaseLoginContext.value);
+	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
 	os.post({
 		reply: appearNote.value,
@@ -630,7 +637,7 @@ function reply(): void {
 }
 
 function react(): void {
-	pleaseLogin(undefined, pleaseLoginContext.value);
+	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
 	if (appearNote.value.reactionAcceptance === 'likeOnly') {
 		sound.playMisskeySfx('reaction');
@@ -667,7 +674,7 @@ function react(): void {
 }
 
 function like(): void {
-	pleaseLogin(undefined, pleaseLoginContext.value);
+	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();
 	sound.playMisskeySfx('reaction');
 	misskeyApi('notes/like', {
@@ -749,7 +756,7 @@ async function clip(): Promise<void> {
 
 function showRenoteMenu(): void {
 	if (!isMyRenote) return;
-	pleaseLogin(undefined, pleaseLoginContext.value);
+	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	os.popupMenu([{
 		text: i18n.ts.unrenote,
 		icon: 'ti ti-trash',
@@ -1018,8 +1025,13 @@ onUnmounted(() => {
 	text-align: right;
 }
 
+.noteHeaderUsernameAndBadgeRoles {
+	display: flex;
+}
+
 .noteHeaderUsername {
 	margin-bottom: 2px;
+	margin-right: 0.5em;
 	line-height: 1.3;
 	word-wrap: anywhere;
 	text-overflow: ellipsis;
@@ -1034,6 +1046,19 @@ onUnmounted(() => {
 	margin-top: 5px;
 }
 
+.noteHeaderBadgeRoles {
+	margin: 0 .5em 0 0;
+}
+
+.noteHeaderBadgeRole {
+	height: 1.3em;
+	vertical-align: -20%;
+
+	& + .noteHeaderBadgeRole {
+		margin-left: 0.2em;
+	}
+}
+
 .noteContent {
 	container-type: inline-size;
 	overflow-wrap: break-word;
-- 
cgit v1.2.3-freya


From 3d1e35c9b8c43b45ffccdfe7fb05a338caa84f69 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Mon, 9 Dec 2024 09:41:48 +0000
Subject: fix a bunch of CSS variables

---
 .../frontend/src/components/MkFoldableSection.vue  |  2 +-
 packages/frontend/src/components/SkFlashPlayer.vue | 54 +++++++++++-----------
 .../src/components/SkFollowingRecentNotes.vue      |  6 +--
 packages/frontend/src/components/SkMfmWindow.vue   |  4 +-
 packages/frontend/src/components/SkNote.vue        |  6 +--
 .../frontend/src/components/SkNoteDetailed.vue     |  2 +-
 6 files changed, 37 insertions(+), 37 deletions(-)

(limited to 'packages/frontend/src/components/SkNoteDetailed.vue')

diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index fb1b5220fb..5bf3fdfe76 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -110,7 +110,7 @@ onMounted(() => {
 	top: var(--MI-stickyTop, 0px);
 	-webkit-backdrop-filter: var(--MI-blur, blur(8px));
 	backdrop-filter: var(--MI-blur, blur(20px));
-	background-color: color(from v-bind("parentBg ?? 'var(--bg)'") srgb r g b / 0.85);
+	background-color: color(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") srgb r g b / 0.85);
 }
 
 .title {
diff --git a/packages/frontend/src/components/SkFlashPlayer.vue b/packages/frontend/src/components/SkFlashPlayer.vue
index 739a7bc74c..2b61974ef7 100644
--- a/packages/frontend/src/components/SkFlashPlayer.vue
+++ b/packages/frontend/src/components/SkFlashPlayer.vue
@@ -244,9 +244,9 @@ onDeactivated(() => {
 }
 
 .hide {
-	border-radius: var(--radius-sm) !important;
+	border-radius: var(--MI-radius-sm) !important;
 	background-color: black !important;
-	color: var(--accentLighten) !important;
+	color: var(--MI_THEME-accentLighten) !important;
 	font-size: 12px !important;
 }
 
@@ -260,9 +260,9 @@ onDeactivated(() => {
 	> i {
 		display: block;
 		position: absolute;
-		border-radius: var(--radius-sm);
-		background-color: var(--fg);
-		color: var(--accentLighten);
+		border-radius: var(--MI-radius-sm);
+		background-color: var(--MI_THEME-fg);
+		color: var(--MI_THEME-accentLighten);
 		font-size: 14px;
 		opacity: .5;
 		padding: 3px 6px;
@@ -276,9 +276,9 @@ onDeactivated(() => {
 	> .alt {
 		display: block;
 		position: absolute;
-		border-radius: var(--radius-sm);
+		border-radius: var(--MI-radius-sm);
 		background-color: black;
-		color: var(--accentLighten);
+		color: var(--MI_THEME-accentLighten);
 		font-size: 0.8em;
 		font-weight: bold;
 		opacity: .5;
@@ -311,10 +311,10 @@ onDeactivated(() => {
 			justify-content: center;
 			align-items: center;
 			background: rgba(64, 64, 64, 0.3);
-			backdrop-filter: var(--modalBgFilter);
+			backdrop-filter: var(--MI-modalBgFilter);
 			color: #fff;
 			font-size: 12px;
-			border-radius: var(--radius-sm);
+			border-radius: var(--MI-radius-sm);
 
 			position: absolute;
 			z-index: 4;
@@ -334,7 +334,7 @@ onDeactivated(() => {
 	> .controls {
 		display: flex;
 		width: 100%;
-		background-color: var(--bg);
+		background-color: var(--MI_THEME-bg);
 		z-index: 5;
 
 		> * {
@@ -344,12 +344,12 @@ onDeactivated(() => {
 		> button, a {
 			border: none;
 			background-color: transparent;
-			color: var(--accent);
+			color: var(--MI_THEME-accent);
 			text-decoration: none;
 			cursor: pointer;
 
 			&:hover {
-				background-color: var(--fg);
+				background-color: var(--MI_THEME-fg);
 			}
 
 			&:disabled {
@@ -385,11 +385,11 @@ onDeactivated(() => {
 				outline: none;
 
 				&::-webkit-slider-runnable-track {
-					background: var(--bg);
+					background: var(--MI_THEME-bg);
 				}
 
 				&::-ms-fill-lower, &::-ms-fill-upper {
-					background: var(--bg);
+					background: var(--MI_THEME-bg);
 				}
 			}
 
@@ -398,8 +398,8 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 				overflow-x: hidden;
 			}
 
@@ -408,9 +408,9 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 				-webkit-appearance: none;
-				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--accent);
+				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
 				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
 				z-index: 1;
 			}
@@ -420,13 +420,13 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				animate: 0.2s;
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 			}
 
 			&::-moz-range-progress {
 				height: 100%;
-				background: var(--accent);
+				background: var(--MI_THEME-accent);
 			}
 
 			&::-moz-range-thumb {
@@ -434,7 +434,7 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				width: 14px;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 			}
 
 			&::-ms-track {
@@ -448,14 +448,14 @@ onDeactivated(() => {
 			}
 
 			&::-ms-fill-lower {
-				background: var(--accent);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-accent);
+				border: 1px solid var(--MI_THEME-fg);
 				border-radius: 0;
 			}
 
 			&::-ms-fill-upper {
-				background: var(--bg);
-				border: 1px solid var(--fg);
+				background: var(--MI_THEME-bg);
+				border: 1px solid var(--MI_THEME-fg);
 				border-radius: 0;
 			}
 
@@ -465,7 +465,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--accentLighten);
+				background: var(--MI_THEME-accentLighten);
 			}
 		}
 	}
diff --git a/packages/frontend/src/components/SkFollowingRecentNotes.vue b/packages/frontend/src/components/SkFollowingRecentNotes.vue
index 6daa8feba5..7e71065082 100644
--- a/packages/frontend/src/components/SkFollowingRecentNotes.vue
+++ b/packages/frontend/src/components/SkFollowingRecentNotes.vue
@@ -118,15 +118,15 @@ function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes)
 
 <style module lang="scss">
 .panel {
-	background: var(--panel);
+	background: var(--MI_THEME-panel);
 }
 
 @keyframes border {
 	from {
-		border-left: 0 solid var(--accent);
+		border-left: 0 solid var(--MI_THEME-accent);
 	}
 	to {
-		border-left: 6px solid var(--accent);
+		border-left: 6px solid var(--MI_THEME-accent);
 	}
 }
 
diff --git a/packages/frontend/src/components/SkMfmWindow.vue b/packages/frontend/src/components/SkMfmWindow.vue
index aaf2fdc9fb..58ca3d38ab 100644
--- a/packages/frontend/src/components/SkMfmWindow.vue
+++ b/packages/frontend/src/components/SkMfmWindow.vue
@@ -491,12 +491,12 @@ const preview_fade = ref(`$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[
 		> .title {
 			position: sticky;
 			z-index: 1;
-			top: var(--stickyTop, 0px);
+			top: var(--MI-stickyTop, 0px);
 			padding: 16px;
 			font-weight: bold;
 			-webkit-backdrop-filter: var(--MI-blur, blur(10px));
 			backdrop-filter: var(--MI-blur, blur(10px));
-			background-color: var(--X16);
+			background-color: var(--MI_THEME-X16);
 		}
 
 		> .content {
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 2569f81762..3f376f8287 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -157,7 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<i class="ph-heart ph-bold ph-lg"></i>
 				</button>
 				<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()" @click.stop>
-					<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
+					<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
 					<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
 					<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
 					<i v-else class="ph-smiley ph-bold ph-lg"></i>
@@ -1147,7 +1147,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	width: 100%;
 	margin-top: 14px;
 	position: sticky;
-	bottom: calc(var(--stickyBottom, 0px) - 100px);
+	bottom: calc(var(--MI-stickyBottom, 0px) - 100px);
 }
 
 .showLessLabel {
@@ -1356,7 +1356,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 	.avatar {
 		margin: 0 10px 0 0;
-		top: calc(14px + var(--stickyTop, 0px));
+		top: calc(14px + var(--MI-stickyTop, 0px));
 	}
 }
 
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 9559696ae1..6c14c6627c 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -172,7 +172,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i class="ph-heart ph-bold ph-lg"></i>
 			</button>
 			<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
-				<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
+				<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
 				<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
 				<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
 				<i v-else class="ph-smiley ph-bold ph-lg"></i>
-- 
cgit v1.2.3-freya