From f15c8cca3703e6e11346560fc4830cd074166e0f Mon Sep 17 00:00:00 2001
From: yukineko <27853966+hideki0403@users.noreply.github.com>
Date: Wed, 16 Oct 2024 00:13:18 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=204a356f1ba742ae3965d01ad17179d3af484?=
 =?UTF-8?q?6377a=20=E3=81=AB=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkDeleteScheduleEditor.vue |  2 +-
 .../src/components/MkPostFormDrafts.vue       | 10 +--
 .../components/MkReactionsViewer.reaction.vue |  4 +-
 .../src/components/MkSignupDialog.choice.vue  | 30 +++++--
 .../src/components/MkSignupDialog.rules.vue   | 80 ++++++++++++++++---
 .../frontend/src/pages/admin/supporter.vue    |  4 +-
 .../src/pages/settings/notifications.note.vue | 59 +++++++-------
 .../frontend/src/pages/settings/post-form.vue |  2 +-
 packages/frontend/src/pages/supporter.vue     |  6 +-
 .../src/ui/_common_/connection-status.vue     |  6 +-
 packages/frontend/src/ui/universal-zen.vue    | 46 +++++------
 11 files changed, 159 insertions(+), 90 deletions(-)

diff --git a/packages/frontend/src/components/MkDeleteScheduleEditor.vue b/packages/frontend/src/components/MkDeleteScheduleEditor.vue
index 12f4a946bf05..655ae4bbf3fe 100644
--- a/packages/frontend/src/components/MkDeleteScheduleEditor.vue
+++ b/packages/frontend/src/components/MkDeleteScheduleEditor.vue
@@ -240,7 +240,7 @@ watch([expiration, atDate, atTime, after, unit, isValid], () => {
 }
 
 .withAccent {
-	color: var(--accent);
+	color: var(--MI_THEME-accent);
 }
 
 .chevronOpening {
diff --git a/packages/frontend/src/components/MkPostFormDrafts.vue b/packages/frontend/src/components/MkPostFormDrafts.vue
index cefedbafb733..b854590fc0ea 100644
--- a/packages/frontend/src/components/MkPostFormDrafts.vue
+++ b/packages/frontend/src/components/MkPostFormDrafts.vue
@@ -109,10 +109,10 @@ onMounted(async () => {
 	padding: 10px;
 	gap: 6px;
 	flex-grow: 1;
-	background-color: var(--buttonBg);
+	background-color: var(--MI_THEME-buttonBg);
 
 	&:hover:not([aria-disabled="true"]) {
-		background-color: var(--buttonHoverBg);
+		background-color: var(--MI_THEME-buttonHoverBg);
 	}
 
 	&[aria-disabled="true"] {
@@ -145,11 +145,11 @@ onMounted(async () => {
 	align-items: center;
 	justify-content: center;
 	padding: 16px;
-	background-color: var(--buttonBg);
-	color: var(--error);
+	background-color: var(--MI_THEME-buttonBg);
+	color: var(--MI_THEME-error);
 
 	&:hover {
-		background-color: var(--error);
+		background-color: var(--MI_THEME-error);
 		color: white;
 	}
 }
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index b422de958c63..6d7c0fd3fc4c 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -215,11 +215,11 @@ if (!mock) {
 
 	&.canToggleFallback:not(.canToggle):not(.reacted) {
 		box-sizing: border-box;
-		border: 2px dashed var(--switchBg);
+		border: 2px dashed var(--MI_THEME-switchBg);
 
 		&.small {
 			border-width: 1px;
-			border-color: var(--buttonBgSub);
+			border-color: var(--MI_THEME-buttonBgSub);
 		}
 
 		&:hover {
diff --git a/packages/frontend/src/components/MkSignupDialog.choice.vue b/packages/frontend/src/components/MkSignupDialog.choice.vue
index b065b4aaf9f5..a8901855942a 100644
--- a/packages/frontend/src/components/MkSignupDialog.choice.vue
+++ b/packages/frontend/src/components/MkSignupDialog.choice.vue
@@ -10,11 +10,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<MkSpacer :marginMin="20" :marginMax="28">
 		<div class="_gaps_m" :class="$style.root">
-			<MkInfo info>{{ i18n.tsx.registrationLimitDetails({ limit: instance.registrationLimitCooldown, count: instance.registrationLimit }) }}</MkInfo>
+			<MkInfo info>
+				{{ i18n.tsx.registrationLimitDetails({ limit: instance.registrationLimitCooldown, count:
+					instance.registrationLimit }) }}
+			</MkInfo>
 			<div>{{ i18n.ts.doYouHaveInviteCode }}</div>
 			<div class="_buttonsCenter">
-				<MkButton :class="$style.choiceButton" inline large style="color: var(--success);" @click="doneWithCode"><i class="ti ti-circle-check-filled"></i> {{ i18n.ts.hasInviteCode }}</MkButton>
-				<MkButton :class="$style.choiceButton" inline large style="color: var(--error);" @click="doneWithoutCode"><i class="ti ti-circle-x-filled"></i> {{ i18n.ts.doesNotHaveInviteCode }}</MkButton>
+				<MkButton
+					:class="$style.choiceButton" inline large style="color: var(--MI_THEME-success);"
+					@click="doneWithCode"
+				>
+					<i class="ti ti-circle-check-filled"></i> {{ i18n.ts.hasInviteCode }}
+				</MkButton>
+				<MkButton
+					:class="$style.choiceButton" inline large style="color: var(--MI_THEME-error);"
+					@click="doneWithoutCode"
+				>
+					<i class="ti ti-circle-x-filled"></i> {{ i18n.ts.doesNotHaveInviteCode }}
+				</MkButton>
 			</div>
 			<MkButton inline rounded @click="emit('cancel')">{{ i18n.ts.cancel }}</MkButton>
 		</div>
@@ -66,8 +79,8 @@ async function doneWithoutCode() {
 	padding: 16px;
 	text-align: center;
 	font-size: 26px;
-	background-color: var(--accentedBg);
-	color: var(--accent);
+	background-color: var(--MI_THEME-accentedBg);
+	color: var(--MI_THEME-accent);
 }
 
 .rules {
@@ -92,8 +105,8 @@ async function doneWithoutCode() {
 		width: 32px;
 		height: 32px;
 		line-height: 32px;
-		background-color: var(--accentedBg);
-		color: var(--accent);
+		background-color: var(--MI_THEME-accentedBg);
+		color: var(--MI_THEME-accent);
 		font-size: 13px;
 		font-weight: bold;
 		align-items: center;
@@ -104,4 +117,5 @@ async function doneWithoutCode() {
 
 .ruleText {
 	padding-top: 6px;
-}</style>
+}
+</style>
diff --git a/packages/frontend/src/components/MkSignupDialog.rules.vue b/packages/frontend/src/components/MkSignupDialog.rules.vue
index ec3e79cfca58..bf8541f3f8a3 100644
--- a/packages/frontend/src/components/MkSignupDialog.rules.vue
+++ b/packages/frontend/src/components/MkSignupDialog.rules.vue
@@ -24,49 +24,103 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkFolder v-if="availableServerRules" :defaultOpen="true">
 				<template #label>{{ i18n.ts.serverRules }}</template>
-				<template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
+				<template #suffix>
+					<i
+						v-if="agreeServerRules" class="ti ti-check"
+						style="color: var(--MI_THEME-success)"
+					></i>
+				</template>
 
 				<ol class="_gaps_s" :class="$style.rules">
-					<li v-for="item in instance.serverRules" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
+					<li v-for="item in instance.serverRules" :class="$style.rule">
+						<div :class="$style.ruleText" v-html="item"></div>
+					</li>
 				</ol>
 
-				<MkSwitch :modelValue="agreeServerRules" style="margin-top: 16px;" @update:modelValue="updateAgreeServerRules">{{ i18n.ts.agree }}</MkSwitch>
+				<MkSwitch
+					:modelValue="agreeServerRules" style="margin-top: 16px;"
+					@update:modelValue="updateAgreeServerRules"
+				>
+					{{ i18n.ts.agree }}
+				</MkSwitch>
 			</MkFolder>
 
 			<MkFolder v-if="availableTos || availablePrivacyPolicy" :defaultOpen="true">
 				<template #label>{{ tosPrivacyPolicyLabel }}</template>
-				<template #suffix><i v-if="agreeTosAndPrivacyPolicy" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
+				<template #suffix>
+					<i
+						v-if="agreeTosAndPrivacyPolicy" class="ti ti-check"
+						style="color: var(--MI_THEME-success)"
+					></i>
+				</template>
 				<div class="_gaps_s">
-					<div v-if="availableTos"><a :href="instance.tosUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a></div>
-					<div v-if="availablePrivacyPolicy"><a :href="instance.privacyPolicyUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.privacyPolicy }} <i class="ti ti-external-link"></i></a></div>
+					<div v-if="availableTos">
+						<a :href="instance.tosUrl ?? undefined" class="_link" target="_blank">{{
+							i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a>
+					</div>
+					<div v-if="availablePrivacyPolicy">
+						<a
+							:href="instance.privacyPolicyUrl ?? undefined" class="_link"
+							target="_blank"
+						>{{ i18n.ts.privacyPolicy }} <i class="ti ti-external-link"></i></a>
+					</div>
 				</div>
 
-				<MkSwitch :modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;" @update:modelValue="updateAgreeTosAndPrivacyPolicy">{{ i18n.ts.agree }}</MkSwitch>
+				<MkSwitch
+					:modelValue="agreeTosAndPrivacyPolicy" style="margin-top: 16px;"
+					@update:modelValue="updateAgreeTosAndPrivacyPolicy"
+				>
+					{{ i18n.ts.agree }}
+				</MkSwitch>
 			</MkFolder>
 
 			<MkFolder :defaultOpen="true">
 				<template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template>
-				<template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
+				<template #suffix>
+					<i
+						v-if="agreeNote" class="ti ti-check"
+						style="color: var(--MI_THEME-success)"
+					></i>
+				</template>
 
-				<a href="https://misskey-hub.net/docs/for-users/onboarding/warning/" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a>
+				<a href="https://misskey-hub.net/docs/for-users/onboarding/warning/" class="_link" target="_blank">{{
+					i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a>
 
-				<MkSwitch :modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree @update:modelValue="updateAgreeNote">{{ i18n.ts.agree }}</MkSwitch>
+				<MkSwitch
+					:modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree
+					@update:modelValue="updateAgreeNote"
+				>
+					{{ i18n.ts.agree }}
+				</MkSwitch>
 			</MkFolder>
 
 			<MkFolder v-if="instance.enableAgeRestriction" :defaultOpen="true">
 				<template #label>{{ i18n.ts.ageCheck }}</template>
-				<template #suffix><i v-if="ageLimitAgreement" class="ti ti-check" style="color: var(--success)"></i></template>
+				<template #suffix>
+					<i
+						v-if="ageLimitAgreement" class="ti ti-check"
+						style="color: var(--MI_THEME-success)"
+					></i>
+				</template>
 
 				<span>{{ i18n.tsx.ageCheckDescription({ age: instance.ageRestrictionThreshold }) }}</span>
 
-				<MkSwitch v-model="ageLimitAgreement" style="margin-top: 16px;">{{ i18n.tsx.ageCheckYes({ age: instance.ageRestrictionThreshold }) }}</MkSwitch>
+				<MkSwitch v-model="ageLimitAgreement" style="margin-top: 16px;">
+					{{ i18n.tsx.ageCheckYes({ age:
+						instance.ageRestrictionThreshold }) }}
+				</MkSwitch>
 			</MkFolder>
 
 			<div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div>
 
 			<div class="_buttonsCenter">
 				<MkButton inline rounded @click="emit('cancel')">{{ i18n.ts.cancel }}</MkButton>
-				<MkButton inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue @click="emit('done')">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+				<MkButton
+					inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue
+					@click="emit('done')"
+				>
+					{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i>
+				</MkButton>
 			</div>
 		</div>
 	</MkSpacer>
diff --git a/packages/frontend/src/pages/admin/supporter.vue b/packages/frontend/src/pages/admin/supporter.vue
index 59500b931a22..634c0ee9efbc 100644
--- a/packages/frontend/src/pages/admin/supporter.vue
+++ b/packages/frontend/src/pages/admin/supporter.vue
@@ -85,7 +85,7 @@ definePageMetadata({
 
 <style lang="scss" module>
 .footer {
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
+	-webkit-backdrop-filter: var(--MI_THEME-blur, blur(15px));
+	backdrop-filter: var(--MI_THEME-blur, blur(15px));
 }
 </style>
diff --git a/packages/frontend/src/pages/settings/notifications.note.vue b/packages/frontend/src/pages/settings/notifications.note.vue
index a7886cd61461..3780af8535d4 100644
--- a/packages/frontend/src/pages/settings/notifications.note.vue
+++ b/packages/frontend/src/pages/settings/notifications.note.vue
@@ -1,34 +1,34 @@
 <template>
-	<div class="_gaps_m">
-		<MkPagination :pagination="noteNotificationPagination">
-			<template #empty>
-				<div class="_fullinfo">
-					<img src="/static-assets/aira/info.png" class="_ghost"/>
-					<div>{{ i18n.ts.noUsers }}</div>
-				</div>
-			</template>
-
-			<template #default="{ items }">
-				<div class="_gaps_s">
-					<div v-for="item in items" :key="item.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedNoteNotificationItems.includes(item.id) }]">
-						<div :class="$style.userItemMain">
-							<MkA :class="$style.userItemMainBody" :to="userPage(item.user)">
-								<MkUserCardMini :user="item.user"/>
-							</MkA>
-							<button class="_button" :class="$style.userToggle" @click="toggleNoteNotificationItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
-							<button class="_button" :class="$style.remove" @click="noteUnsubscribe(item.userId, $event)"><i class="ti ti-x"></i></button>
-						</div>
-						<div v-if="expandedNoteNotificationItems.includes(item.id)" :class="$style.userItemSub">
-							<div>
-								Created at:
-								<MkTime :time="item.createdAt" mode="detail"/>
-							</div>
+<div class="_gaps_m">
+	<MkPagination :pagination="noteNotificationPagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img src="/static-assets/aira/info.png" class="_ghost"/>
+				<div>{{ i18n.ts.noUsers }}</div>
+			</div>
+		</template>
+
+		<template #default="{ items }">
+			<div class="_gaps_s">
+				<div v-for="item in items" :key="item.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedNoteNotificationItems.includes(item.id) }]">
+					<div :class="$style.userItemMain">
+						<MkA :class="$style.userItemMainBody" :to="userPage(item.user)">
+							<MkUserCardMini :user="item.user"/>
+						</MkA>
+						<button class="_button" :class="$style.userToggle" @click="toggleNoteNotificationItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
+						<button class="_button" :class="$style.remove" @click="noteUnsubscribe(item.userId, $event)"><i class="ti ti-x"></i></button>
+					</div>
+					<div v-if="expandedNoteNotificationItems.includes(item.id)" :class="$style.userItemSub">
+						<div>
+							Created at:
+							<MkTime :time="item.createdAt" mode="detail"/>
 						</div>
 					</div>
 				</div>
-			</template>
-		</MkPagination>
-	</div>
+			</div>
+		</template>
+	</MkPagination>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -83,7 +83,7 @@ definePageMetadata({
 .userItemSub {
 	padding: 6px 12px;
 	font-size: 85%;
-	color: var(--fgTransparentWeak);
+	color: var(--MI_THEME-fgTransparentWeak);
 }
 
 .userItemMainBody {
@@ -112,4 +112,5 @@ definePageMetadata({
 	.chevron {
 		transform: rotateX(180deg);
 	}
-}</style>
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/post-form.vue b/packages/frontend/src/pages/settings/post-form.vue
index 79004b8ca7b3..3c1a7d1e7cb8 100644
--- a/packages/frontend/src/pages/settings/post-form.vue
+++ b/packages/frontend/src/pages/settings/post-form.vue
@@ -162,7 +162,7 @@ definePageMetadata(() => ({
 	border-radius: 6px;
 
 	&:hover {
-		background: var(--X5);
+		background: var(--MI_THEME-X5);
 	}
 }
 
diff --git a/packages/frontend/src/pages/supporter.vue b/packages/frontend/src/pages/supporter.vue
index 0e7d89d42a4b..3c5136cadcac 100644
--- a/packages/frontend/src/pages/supporter.vue
+++ b/packages/frontend/src/pages/supporter.vue
@@ -32,9 +32,9 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, computed } from 'vue';
+import { host } from '@@/js/config.js';
 import FormSection from '@/components/form/section.vue';
 import { i18n } from '@/i18n.js';
-import { host } from '@@/js/config.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { instance } from '@/instance.js';
 import { userPage } from '@/filters/user.js';
@@ -81,12 +81,12 @@ definePageMetadata({
 	display: flex;
 	align-items: center;
 	padding: 12px;
-	background: var(--buttonBg);
+	background: var(--MI_THEME-buttonBg);
 	border-radius: 6px;
 
 	&:hover {
 		text-decoration: none;
-		background: var(--buttonHoverBg);
+		background: var(--MI_THEME-buttonHoverBg);
 	}
 }
 
diff --git a/packages/frontend/src/ui/_common_/connection-status.vue b/packages/frontend/src/ui/_common_/connection-status.vue
index 338f53372a25..005362cabe8d 100644
--- a/packages/frontend/src/ui/_common_/connection-status.vue
+++ b/packages/frontend/src/ui/_common_/connection-status.vue
@@ -60,7 +60,7 @@ onUnmounted(() => {
 	display: flex;
 	gap: 4px;
 	z-index: v-bind(zIndex);
-	bottom: calc(var(--minBottomSpacing) + var(--margin));
+	bottom: calc(var(--MI_THEME-minBottomSpacing) + var(--margin));
 	right: var(--margin);
 	margin: 0;
 	padding: 6px 8px;
@@ -75,11 +75,11 @@ onUnmounted(() => {
 }
 
 .online {
-	color: var(--accent);
+	color: var(--MI_THEME-accent);
 }
 
 .offline {
-	color: var(--fg);
+	color: var(--MI_THEME-fg);
 }
 
 .icon {
diff --git a/packages/frontend/src/ui/universal-zen.vue b/packages/frontend/src/ui/universal-zen.vue
index d36d0894a924..d26deb20e202 100644
--- a/packages/frontend/src/ui/universal-zen.vue
+++ b/packages/frontend/src/ui/universal-zen.vue
@@ -209,7 +209,7 @@ watch(navFooter, () => {
 	if (navFooter.value) {
 		navFooterHeight.value = navFooter.value.offsetHeight;
 		document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`);
-		document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
+		document.body.style.setProperty('--minBottomSpacing', 'var(--MI_THEME-minBottomSpacingMobile)');
 	} else {
 		navFooterHeight.value = 0;
 		document.body.style.setProperty('--stickyBottom', '0px');
@@ -313,7 +313,7 @@ $widgets-hide-threshold: 1090px;
 }
 
 .sidebar {
-	border-right: solid 0.5px var(--divider);
+	border-right: solid 0.5px var(--MI_THEME-divider);
 }
 
 .contents {
@@ -323,7 +323,7 @@ $widgets-hide-threshold: 1090px;
 	overflow: auto;
 	overflow-y: scroll;
 	overscroll-behavior: contain;
-	background: var(--bg);
+	background: var(--MI_THEME-bg);
 }
 
 .widgets {
@@ -332,8 +332,8 @@ $widgets-hide-threshold: 1090px;
 	box-sizing: border-box;
 	overflow: auto;
 	padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
-	border-left: solid 0.5px var(--divider);
-	background: var(--bg);
+	border-left: solid 0.5px var(--MI_THEME-divider);
+	background: var(--MI_THEME-bg);
 
 	@media (max-width: $widgets-hide-threshold) {
 		display: none;
@@ -351,7 +351,7 @@ $widgets-hide-threshold: 1090px;
 	border-radius: 100%;
 	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(--panel);
+	background: var(--MI_THEME-panel);
 }
 
 .widgetsDrawerBg {
@@ -369,7 +369,7 @@ $widgets-hide-threshold: 1090px;
 	box-sizing: border-box;
 	overflow: auto;
 	overscroll-behavior: contain;
-	background: var(--bg);
+	background: var(--MI_THEME-bg);
 }
 
 .widgetsCloseButton {
@@ -394,10 +394,10 @@ $widgets-hide-threshold: 1090px;
 	justify-content: space-between;
 	width: 100%;
 	box-sizing: border-box;
-	-webkit-backdrop-filter: var(--blur, blur(24px));
-	backdrop-filter: var(--blur, blur(24px));
-	background-color: var(--header);
-	border-top: solid 0.5px var(--divider);
+	-webkit-backdrop-filter: var(--MI_THEME-blur, blur(24px));
+	backdrop-filter: var(--MI_THEME-blur, blur(24px));
+	background-color: var(--MI_THEME-header);
+	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 
 .navButton {
@@ -408,29 +408,29 @@ $widgets-hide-threshold: 1090px;
 	max-width: 60px;
 	margin: auto;
 	border-radius: 100%;
-	background: var(--panel);
-	color: var(--fg);
+	background: var(--MI_THEME-panel);
+	color: var(--MI_THEME-fg);
 
 	&:hover {
-		background: var(--panelHighlight);
+		background: var(--MI_THEME-panelHighlight);
 	}
 
 	&:active {
-		background: var(--X2);
+		background: var(--MI_THEME-X2);
 	}
 }
 
 .postButton {
 	composes: navButton;
-	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-	color: var(--fgOnAccent);
+	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
+	color: var(--MI_THEME-fgOnAccent);
 
 	&:hover {
-		background: linear-gradient(90deg, var(--X8), var(--X8));
+		background: linear-gradient(90deg, var(--MI_THEME-X8), var(--MI_THEME-X8));
 	}
 
 	&:active {
-		background: linear-gradient(90deg, var(--X8), var(--X8));
+		background: linear-gradient(90deg, var(--MI_THEME-X8), var(--MI_THEME-X8));
 	}
 }
 
@@ -443,7 +443,7 @@ $widgets-hide-threshold: 1090px;
 	position: absolute;
 	top: 0;
 	left: 0;
-	color: var(--indicator);
+	color: var(--MI_THEME-indicator);
 	font-size: 16px;
 	animation: blink 1s infinite;
 
@@ -468,7 +468,7 @@ $widgets-hide-threshold: 1090px;
 	contain: strict;
 	overflow: auto;
 	overscroll-behavior: contain;
-	background: var(--navBg);
+	background: var(--MI_THEME-navBg);
 }
 
 .statusbars {
@@ -478,10 +478,10 @@ $widgets-hide-threshold: 1090px;
 }
 
 .spacer {
-	height: calc(var(--minBottomSpacing));
+	height: calc(var(--MI_THEME-minBottomSpacing));
 }
 
 .postForm {
-	border-radius: var(--radius);
+	border-radius: var(--MI_THEME-radius);
 }
 </style>