refactor(frontend): remove X theme properties (misskey-dev#15376)

* refactor(frontend): remove X theme properties

* Update MkAutocomplete.vue

* Update WidgetCalendar.vue

Author: syuilo

packages/frontend-shared/themes/_dark.json5

@@ -79,14 +79,6 @@
 		codeBoolean: '#c59eff',
 		deckBg: '#000',
 		htmlThemeColor: '@bg',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
 	},
 
 	codeHighlighter: {

packages/frontend-shared/themes/_light.json5

@@ -79,14 +79,6 @@
 		codeBoolean: '#62b70c',
 		deckBg: ':darken<3<@bg',
 		htmlThemeColor: '@bg',
-		X3: 'rgba(0, 0, 0, 0.05)',
-		X4: 'rgba(0, 0, 0, 0.1)',
-		X5: 'rgba(0, 0, 0, 0.05)',
-		X6: 'rgba(0, 0, 0, 0.25)',
-		X7: 'rgba(0, 0, 0, 0.05)',
-		X11: 'rgba(0, 0, 0, 0.1)',
-		X12: 'rgba(0, 0, 0, 0.1)',
-		X13: 'rgba(0, 0, 0, 0.15)',
 	},
 
 	codeHighlighter: {

packages/frontend-shared/themes/d-astro.json5

@@ -54,13 +54,5 @@
 		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
 	},
 }

packages/frontend-shared/themes/d-u0.json5

@@ -3,17 +3,9 @@
 	base: 'dark',
 	name: 'Mi U0 Dark',
 	props: {
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
 		bg: '#172426',
 		fg: '#dadada',
 		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
 		X14: ':alpha<0.5<@navBg',
 		X15: ':alpha<0<@panel',
 		X16: ':alpha<0.7<@panel',

packages/frontend-shared/themes/l-u0.json5

@@ -3,17 +3,9 @@
 	base: 'light',
 	name: 'Mi U0 Light',
 	props: {
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
 		bg: '#e7e7eb',
 		fg: '#5f5f5f',
 		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
 		X14: ':alpha<0.5<@navBg',
 		X15: ':alpha<0<@panel',
 		X16: ':alpha<0.7<@panel',

packages/frontend-shared/themes/l-vivid.json5

@@ -57,13 +57,5 @@
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: '@divider',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
-		X3: 'rgba(0, 0, 0, 0.05)',
-		X4: 'rgba(0, 0, 0, 0.1)',
-		X5: 'rgba(0, 0, 0, 0.05)',
-		X6: 'rgba(0, 0, 0, 0.25)',
-		X7: 'rgba(0, 0, 0, 0.05)',
-		X11: 'rgba(0, 0, 0, 0.1)',
-		X12: 'rgba(0, 0, 0, 0.1)',
-		X13: 'rgba(0, 0, 0, 0.15)',
 	},
 }

packages/frontend/src/components/MkAutocomplete.vue

@@ -47,16 +47,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { markRaw, ref, shallowRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import sanitizeHtml from 'sanitize-html';
 import { emojilist, getEmojiName } from '@@/js/emojilist.js';
-import contains from '@/scripts/contains.js';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@@/js/emoji-base.js';
+import { MFM_TAGS, MFM_PARAMS } from '@@/js/const.js';
+import contains from '@/scripts/contains.js';
 import { acct } from '@/filters/user.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { customEmojis } from '@/custom-emojis.js';
-import { MFM_TAGS, MFM_PARAMS } from '@@/js/const.js';
 import { searchEmoji } from '@/scripts/search-emoji.js';
 import type { EmojiDef } from '@/scripts/search-emoji.js';
 
@@ -408,7 +408,7 @@ onBeforeUnmount(() => {
 	text-overflow: ellipsis;
 
 	&:hover {
-		background: var(--MI_THEME-X3);
+		background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 	}
 
 	&[data-selected='true'] {

packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue

@@ -85,7 +85,7 @@ function cancel() {
 .emojiImgWrapper {
   max-width: 100%;
   height: 40cqh;
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)) 8px, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)) 14px);
   border-radius: var(--MI-radius);
   margin: auto;
   overflow-y: hidden;
@@ -101,7 +101,7 @@ function cancel() {
   display: inline-block;
   word-break: break-all;
   padding: 3px 10px;
-  background-color: var(--MI_THEME-X5);
+  background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
   border: solid 1px var(--MI_THEME-divider);
   border-radius: var(--MI-radius);
 }

packages/frontend/src/components/MkEmojiPicker.vue

@@ -582,7 +582,7 @@ defineExpose({
 
 						&:disabled {
 							cursor: not-allowed;
-							background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
+							background: linear-gradient(-45deg, transparent 0% 48%, light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.15)) 48% 52%, transparent 52% 100%);
 							opacity: 1;
 
 							> .emoji {
@@ -617,7 +617,7 @@ defineExpose({
 
 						&:disabled {
 							cursor: not-allowed;
-							background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
+							background: linear-gradient(-45deg, transparent 0% 48%, light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.15)) 48% 52%, transparent 52% 100%);
 							opacity: 1;
 
 							> .emoji {
@@ -738,7 +738,7 @@ defineExpose({
 
 					&:disabled {
 						cursor: not-allowed;
-						background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
+						background: linear-gradient(-45deg, transparent 0% 48%, light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.15)) 48% 52%, transparent 52% 100%);
 						opacity: 1;
 
 						> .emoji {

packages/frontend/src/components/MkPostForm.vue

@@ -1166,7 +1166,7 @@ defineExpose({
 	border-radius: 6px;
 
 	&:hover {
-		background: var(--MI_THEME-X5);
+		background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 	}
 
 	&:disabled {
@@ -1238,7 +1238,7 @@ html[data-color-scheme=light] .preview {
 	margin-right: 14px;
 	padding: 8px 0 8px 8px;
 	border-radius: 8px;
-	background: var(--MI_THEME-X4);
+	background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
 }
 
 .hasNotSpecifiedMentions {
@@ -1349,7 +1349,7 @@ html[data-color-scheme=light] .preview {
 	border-radius: 6px;
 
 	&:hover {
-		background: var(--MI_THEME-X5);
+		background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 	}
 
 	&.footerButtonActive {

packages/frontend/src/components/MkUserSelectDialog.vue

@@ -63,6 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref, computed, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
+import { host as currentHost, hostname } from '@@/js/config.js';
 import MkInput from '@/components/MkInput.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -71,7 +72,6 @@ import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import { instance } from '@/instance.js';
-import { host as currentHost, hostname } from '@@/js/config.js';
 
 const emit = defineEmits<{
 	(ev: 'ok', selected: Misskey.entities.UserDetailed): void;
@@ -198,7 +198,7 @@ onMounted(() => {
 	font-size: 14px;
 
 	&:hover {
-		background: var(--MI_THEME-X7);
+		background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 	}
 
 	&.selected {

packages/frontend/src/pages/admin/server-rules.vue

@@ -122,7 +122,7 @@ definePageMetadata(() => ({
 	border-radius: 6px;
 
 	&:hover {
-		background: var(--MI_THEME-X5);
+		background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 	}
 }
 

packages/frontend/src/pages/page-editor/page-editor.container.vue

@@ -61,11 +61,11 @@ function remove() {
 	position: relative;
 	overflow: hidden;
 	background: var(--MI_THEME-panel);
-	border: solid 2px var(--MI_THEME-X12);
+	border: solid 2px light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
 	border-radius: 8px;
 
 	&:hover {
-		border: solid 2px var(--MI_THEME-X13);
+		border: solid 2px light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15));
 	}
 
 	&.warn {

packages/frontend/src/widgets/WidgetCalendar.vue

@@ -208,7 +208,7 @@ defineExpose<WidgetComponentExpose>({
 .meter {
 	width: 100%;
 	overflow: hidden;
-	background: var(--MI_THEME-X11);
+	background: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
 	border-radius: 8px;
 }