fix a bunch of CSS variables

6 files changed, 37 insertions, 37 deletions

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>