From d986da745b19513a4bfa7f7c2f2509f6e5eee627 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 5 Jul 2025 09:59:48 +0900
Subject: 
 ノートのサーバー情報(InstanceTicker)のデザイン/パフォーマンス改善(-webkit-text-stroke
 ver) (#16225)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "enhance(frontend): Instance Tickerのデザイン改善 (#15946)"

This reverts commit 04928ba7d163d3c5ecec89196f36b4cb94a01381.

* enhance(frontend): Instance Tickerのデザイン改善(-webkit-text-stroke)

* :art:

* use theme fg/bg

* use panel
---
 .../frontend/src/components/MkInstanceTicker.vue   | 32 +++++-----------------
 1 file changed, 7 insertions(+), 25 deletions(-)

(limited to 'packages')

diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 62ff806096..fa22a150c3 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -12,7 +12,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import tinycolor from 'tinycolor2';
 import { instanceName as localInstanceName } from '@@/js/config.js';
 import type { CSSProperties } from 'vue';
 import { instance as localInstance } from '@/instance.js';
@@ -44,33 +43,10 @@ const faviconUrl = computed(() => {
 	return getProxiedImageUrlNullable(imageSrc);
 });
 
-type ITickerColors = {
-	readonly bg: string;
-	readonly fg: string;
-};
-
-const TICKER_YUV_THRESHOLD = 191 as const;
-const TICKER_FG_COLOR_LIGHT = '#ffffff' as const;
-const TICKER_FG_COLOR_DARK = '#2f2f2fcc' as const;
-
-function getTickerColors(bgHex: string): ITickerColors {
-	const tinycolorInstance = tinycolor(bgHex);
-	const { r, g, b } = tinycolorInstance.toRgb();
-	const yuv = 0.299 * r + 0.587 * g + 0.114 * b;
-	const fgHex = yuv > TICKER_YUV_THRESHOLD ? TICKER_FG_COLOR_DARK : TICKER_FG_COLOR_LIGHT;
-
-	return {
-		fg: fgHex,
-		bg: bgHex,
-	} as const satisfies ITickerColors;
-}
-
 const themeColorStyle = computed<CSSProperties>(() => {
 	const themeColor = (props.host == null ? localInstance.themeColor : props.instance?.themeColor) ?? '#777777';
-	const colors = getTickerColors(themeColor);
 	return {
-		background: `linear-gradient(90deg, ${colors.bg}, ${colors.bg}00)`,
-		color: colors.fg,
+		background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
 	};
 });
 </script>
@@ -84,6 +60,7 @@ $height: 2ex;
 	height: $height;
 	border-radius: 4px 0 0 4px;
 	overflow: clip;
+	color: #fff;
 
 	// text-shadowは重いから使うな
 
@@ -106,5 +83,10 @@ $height: 2ex;
 	font-weight: bold;
 	white-space: nowrap;
 	overflow: visible;
+
+	// text-shadowは重いから使うな
+	color: var(--MI_THEME-fg);
+	-webkit-text-stroke: var(--MI_THEME-panel) .225em;
+	paint-order: stroke fill;
 }
 </style>
-- 
cgit v1.2.3-freya