ノートのサーバー情報(InstanceTicker)のデザイン/パフォーマンス改善(-webkit-text-stroke ver) (#16225)

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

This reverts commit 04928ba7d1.

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

* 🎨

* use theme fg/bg

* use panel

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>