fix: テーマにプロパティ 'fgOnWhite' を追加してフォローボタンのスタイルを調整 (#10931)

* fix: add theme property 'fgOnWhite' and fix styles of follow button.

* fix: add theme property 'fgOnWhite' and fix styles of follow button.

CHANGELOG.md

@@ -39,6 +39,8 @@
 - Fix: ロールタイムラインにて全ての投稿が流れてしまう問題の修正
 - Fix: 「アクセストークンの管理」画面でアプリの情報が表示されない問題の修正
 - Fix: Firefoxにおける絵文字ピッカーのTabキーフォーカス問題の修正
+- Fix: フォローボタンがテーマのカラースキームによって視認性が悪くなる問題を修正
+  - 新しいプロパティ `fgOnWhite` が追加されました
 
 ### Server
 - bullをbull-mqにアップグレードし、ジョブキューのパフォーマンスを改善

packages/frontend/src/components/MkFollowButton.vue

@@ -131,8 +131,7 @@ onBeforeUnmount(() => {
 	position: relative;
 	display: inline-block;
 	font-weight: bold;
-	color: var(--accent);
-	background: transparent;
+	color: var(--fgOnWhite);
 	border: solid 1px var(--accent);
 	padding: 0;
 	height: 31px;

packages/frontend/src/themes/_dark.json5

@@ -21,6 +21,7 @@
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':lighten<3<@fg',
 		fgOnAccent: '#fff',
+		fgOnWhite: '#333',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',

packages/frontend/src/themes/_light.json5

@@ -21,6 +21,7 @@
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':darken<3<@fg',
 		fgOnAccent: '#fff',
+		fgOnWhite: '#333',
 		divider: 'rgba(0, 0, 0, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',

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

@@ -53,6 +53,7 @@
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
 		htmlThemeColor: '@bg',
+		fgOnWhite: '@accent',
 		panelHighlight: ':lighten<3<@panel',
 		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',

packages/frontend/src/themes/d-botanical.json5

@@ -11,6 +11,7 @@
 		bg: 'rgb(37, 38, 36)',
 		fg: 'rgb(216, 212, 199)',
 		fgHighlighted: '#fff',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: 'rgb(47, 47, 44)',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',

packages/frontend/src/themes/d-cherry.json5

@@ -10,6 +10,7 @@
 		accent: 'rgb(255, 89, 117)',
 		bg: 'rgb(28, 28, 37)',
 		fg: 'rgb(236, 239, 244)',
+		fgOnWhite: '@accent',
 		panel: 'rgb(35, 35, 47)',
 		renote: '@accent',
 		link: '@accent',

packages/frontend/src/themes/d-dark.json5

@@ -11,6 +11,7 @@
 		bg: '#232323',
 		fg: 'rgb(199, 209, 216)',
 		fgHighlighted: '#fff',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: '#2d2d2d',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',

packages/frontend/src/themes/d-future.json5

@@ -12,6 +12,7 @@
 		fg: '#D5D5D6',
 		fgHighlighted: '#fff',
 		fgOnAccent: '#000',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		panel: '#18181c',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',

packages/frontend/src/themes/d-green-lime.json5

@@ -12,6 +12,7 @@
 		fg: '#dee7e4',
 		fgHighlighted: '#fff',
 		fgOnAccent: '#192320',
+		fgOnWhite: '@accent',
 		divider: '#e7fffb24',
 		panel: '#192320',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',

packages/frontend/src/themes/d-green-orange.json5

@@ -12,6 +12,7 @@
 		fg: '#dee7e4',
 		fgHighlighted: '#fff',
 		fgOnAccent: '#192320',
+		fgOnWhite: '@accent',
 		divider: '#e7fffb24',
 		panel: '#192320',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',

packages/frontend/src/themes/d-ice.json5

@@ -8,6 +8,7 @@
 
 	props: {
 		accent: '#47BFE8',
+		fgOnWhite: '@accent',
 		bg: '#212526',
 	},
 }

packages/frontend/src/themes/d-persimmon.json5

@@ -11,6 +11,7 @@
 		bg: 'rgb(31, 33, 31)',
 		fg: '#cdd8c7',
 		fgHighlighted: '#fff',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: 'rgb(41, 43, 41)',
 		infoFg: '@fg',

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

@@ -55,6 +55,7 @@
 		codeNumber: '#cfff9e',
 		codeString: '#ffb675',
 		fgOnAccent: '#fff',
+		fgOnWhite: '@accent',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
 		navHoverFg: ':lighten<17<@fg',

packages/frontend/src/themes/l-apricot.json5

@@ -10,6 +10,7 @@
 		accent: 'rgb(234, 154, 82)',
 		bg: '#e6e5e2',
 		fg: 'rgb(149, 143, 139)',
+		fgOnWhite: '@accent',
 		panel: '#EEECE8',
 		renote: '@accent',
 		link: '@accent',

packages/frontend/src/themes/l-botanical.json5

@@ -11,6 +11,7 @@
 		bg: 'e2deda',
 		fg: '#3d3d3d',
 		fgHighlighted: '#6bc9a0',
+		fgOnWhite: '@accent',
 		divider: '#cfcfcf',
 		panel: '@X14',
 		panelHeaderBg: '@panel',

packages/frontend/src/themes/l-cherry.json5

@@ -10,6 +10,7 @@
 		accent: 'rgb(219, 96, 114)',
 		bg: 'rgb(254, 248, 249)',
 		fg: 'rgb(152, 13, 26)',
+		fgOnWhite: '@accent',
 		panel: 'rgb(255, 255, 255)',
 		renote: '@accent',
 		link: 'rgb(156, 187, 5)',

packages/frontend/src/themes/l-coffee.json5

@@ -10,6 +10,7 @@
 		accent: '#9f8989',
 		bg: '#f5f3f3',
 		fg: '#7f6666',
+		fgOnWhite: '@accent',
 		panel: '#fff',
 		divider: 'rgba(87, 68, 68, 0.1)',
 		renote: 'rgb(160, 172, 125)',

packages/frontend/src/themes/l-light.json5

@@ -10,6 +10,7 @@
 	props: {
 		bg: '#f9f9f9',
 		fg: '#676767',
+		fgOnWhite: '@accent',
 		divider: '#e8e8e8',
 		header: ':alpha<0.7<@panel',
 		navBg: '#fff',

packages/frontend/src/themes/l-rainy.json5

@@ -10,6 +10,7 @@
 		accent: '#5db0da',
 		bg: 'rgb(246 248 249)',
 		fg: '#636b71',
+		fgOnWhite: '@accent',
 		panel: '#fff',
 		divider: 'rgb(230 233 234)',
 		panelHeaderDivider: '@divider',

packages/frontend/src/themes/l-sushi.json5

@@ -10,6 +10,7 @@
 		accent: '#e36749',
 		bg: '#f0eee9',
 		fg: '#5f5f5f',
+		fgOnWhite: '@accent',
 		renote: '@accent',
 		link: '@accent',
 		mention: '@accent',

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

@@ -55,6 +55,7 @@
 		codeNumber: '#cfff9e',
 		codeString: '#ffb675',
 		fgOnAccent: '#fff',
+		fgOnWhite: '@accent',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
 		navHoverFg: ':lighten<17<@fg',

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

@@ -52,6 +52,7 @@
 		driveFolderBg: ':alpha<0.3<@accent',
 		fgHighlighted: ':darken<3<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
+		fgOnWhite: '@accent',
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
 		htmlThemeColor: '@bg',