From cfb61289a99a2f6c4e0d8214a11046a93db1180d Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 5 Feb 2025 20:17:48 +0900
Subject: [PATCH] refactor(frontend): remove X theme properties (#15376)
* refactor(frontend): remove X theme properties
* Update MkAutocomplete.vue
* Update WidgetCalendar.vue
---
packages/frontend-shared/themes/_dark.json5 | 8 --------
packages/frontend-shared/themes/_light.json5 | 8 --------
packages/frontend-shared/themes/d-astro.json5 | 8 --------
packages/frontend-shared/themes/d-u0.json5 | 8 --------
packages/frontend-shared/themes/l-u0.json5 | 8 --------
packages/frontend-shared/themes/l-vivid.json5 | 8 --------
packages/frontend/src/components/MkAutocomplete.vue | 6 +++---
.../src/components/MkCustomEmojiDetailedDialog.vue | 4 ++--
packages/frontend/src/components/MkEmojiPicker.vue | 6 +++---
packages/frontend/src/components/MkPostForm.vue | 6 +++---
packages/frontend/src/components/MkUserSelectDialog.vue | 4 ++--
packages/frontend/src/pages/admin/server-rules.vue | 2 +-
.../src/pages/page-editor/page-editor.container.vue | 4 ++--
packages/frontend/src/widgets/WidgetCalendar.vue | 2 +-
14 files changed, 17 insertions(+), 65 deletions(-)
diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index 5271785e62..f2d8a7aed8 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/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: {
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index be331ce58f..22893bf4b3 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/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: {
diff --git a/packages/frontend-shared/themes/d-astro.json5 b/packages/frontend-shared/themes/d-astro.json5
index 4422526a33..e8864df336 100644
--- a/packages/frontend-shared/themes/d-astro.json5
+++ b/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)',
},
}
diff --git a/packages/frontend-shared/themes/d-u0.json5 b/packages/frontend-shared/themes/d-u0.json5
index fb707c74c3..0223b1fb5c 100644
--- a/packages/frontend-shared/themes/d-u0.json5
+++ b/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',
diff --git a/packages/frontend-shared/themes/l-u0.json5 b/packages/frontend-shared/themes/l-u0.json5
index 7062e7fe5b..f6023af819 100644
--- a/packages/frontend-shared/themes/l-u0.json5
+++ b/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',
diff --git a/packages/frontend-shared/themes/l-vivid.json5 b/packages/frontend-shared/themes/l-vivid.json5
index 39768d4ac6..058c9c32e5 100644
--- a/packages/frontend-shared/themes/l-vivid.json5
+++ b/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)',
},
}
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index e7372da6f8..685dcb86e4 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -47,8 +47,9 @@ 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';
@@ -56,7 +57,6 @@ 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'] {
diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
index e6ab17417d..86d6269c69 100644
--- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
+++ b/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);
}
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 7ee0d6a6ac..5da161dae8 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/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 {
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 500f97b2ed..4f2792ed40 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/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 {
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 63af652cbc..1e93d9dbea 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/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 {
diff --git a/packages/frontend/src/pages/admin/server-rules.vue b/packages/frontend/src/pages/admin/server-rules.vue
index 552958af6f..cd50f92143 100644
--- a/packages/frontend/src/pages/admin/server-rules.vue
+++ b/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));
}
}
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 a96c2c2a77..936a7462dd 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.container.vue
+++ b/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 {
diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
index 1f8d715b8e..94169d5e40 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.vue
+++ b/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;
}