From e2b68aabae57a2f240983594cc530e01d7f8ee13 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 10 Apr 2025 18:26:01 +0900
Subject: fix(deps): update [frontend] update dependencies (#15736)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 packages/frontend-shared/package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages/frontend-shared')

diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
index e72baf48e2..b22bdc713b 100644
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -21,14 +21,14 @@
 		"lint": "pnpm typecheck && pnpm eslint"
 	},
 	"devDependencies": {
-		"@types/node": "22.13.11",
-		"@typescript-eslint/eslint-plugin": "8.27.0",
-		"@typescript-eslint/parser": "8.27.0",
-		"esbuild": "0.25.1",
+		"@types/node": "22.14.0",
+		"@typescript-eslint/eslint-plugin": "8.29.1",
+		"@typescript-eslint/parser": "8.29.1",
+		"esbuild": "0.25.2",
 		"eslint-plugin-vue": "10.0.0",
 		"nodemon": "3.1.9",
-		"typescript": "5.8.2",
-		"vue-eslint-parser": "10.1.1"
+		"typescript": "5.8.3",
+		"vue-eslint-parser": "10.1.3"
 	},
 	"files": [
 		"js-built"
-- 
cgit v1.2.3-freya


From 17e7340933887fb4044bdee4798ed87c873f1dad Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:59:05 +0900
Subject: enhance(frontend): テーマでページヘッダーの色を変更できるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend-shared/themes/_dark.json5              |  2 ++
 packages/frontend-shared/themes/_light.json5             |  2 ++
 packages/frontend/src/components/MkThemePreview.vue      |  5 ++++-
 packages/frontend/src/components/global/MkPageHeader.vue | 11 +++++++++--
 4 files changed, 17 insertions(+), 3 deletions(-)

(limited to 'packages/frontend-shared')

diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index 924be27455..8ebaf20b64 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -33,6 +33,8 @@
 		navFg: '@fg',
 		navActive: '@accent',
 		navIndicator: '@indicator',
+		pageHeaderBg: '@bg',
+		pageHeaderFg: '@fg',
 		link: '#44a4c1',
 		hashtag: '#ff9156',
 		mention: '@accent',
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index e3c62ff543..63ad95ff84 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -33,6 +33,8 @@
 		navFg: '@fg',
 		navActive: '@accent',
 		navIndicator: '@indicator',
+		pageHeaderBg: '@bg',
+		pageHeaderFg: '@fg',
 		link: '#44a4c1',
 		hashtag: '#ff9156',
 		mention: '@accent',
diff --git a/packages/frontend/src/components/MkThemePreview.vue b/packages/frontend/src/components/MkThemePreview.vue
index 013ab9d6a4..cc4254a2f6 100644
--- a/packages/frontend/src/components/MkThemePreview.vue
+++ b/packages/frontend/src/components/MkThemePreview.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<g fill-rule="evenodd">
 		<rect width="200" height="150" :fill="themeVariables.bg"/>
 		<rect width="64" height="150" :fill="themeVariables.navBg"/>
-		<rect x="64" width="136" height="41" :fill="themeVariables.bg"/>
+		<rect x="64" width="136" height="41" :fill="themeVariables.pageHeaderBg"/>
 		<path transform="scale(.26458)" d="m439.77 247.19c-43.673 0-78.832 35.157-78.832 78.83v249.98h407.06v-328.81z" :fill="themeVariables.panel"/>
 	</g>
 	<circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/>
@@ -62,6 +62,7 @@ const themeVariables = ref<{
 	accent: string;
 	accentedBg: string;
 	navBg: string;
+	pageHeaderBg: string;
 	success: string;
 	warn: string;
 	error: string;
@@ -76,6 +77,7 @@ const themeVariables = ref<{
 	accent: 'var(--MI_THEME-accent)',
 	accentedBg: 'var(--MI_THEME-accentedBg)',
 	navBg: 'var(--MI_THEME-navBg)',
+	pageHeaderBg: 'var(--MI_THEME-pageHeaderBg)',
 	success: 'var(--MI_THEME-success)',
 	warn: 'var(--MI_THEME-warn)',
 	error: 'var(--MI_THEME-error)',
@@ -104,6 +106,7 @@ watch(() => props.theme, (theme) => {
 		accent: compiled.accent ?? 'var(--MI_THEME-accent)',
 		accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',
 		navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)',
+		pageHeaderBg: compiled.pageHeaderBg ?? 'var(--MI_THEME-pageHeaderBg)',
 		success: compiled.success ?? 'var(--MI_THEME-success)',
 		warn: compiled.warn ?? 'var(--MI_THEME-warn)',
 		error: compiled.error ?? 'var(--MI_THEME-error)',
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 93f46a866a..dc0b52b141 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -124,11 +124,18 @@ onUnmounted(() => {
 
 <style lang="scss" module>
 .root {
-	background: color(from var(--MI_THEME-bg) srgb r g b / 0.75);
+	background: color(from var(--MI_THEME-pageHeaderBg) srgb r g b / 0.75);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	border-bottom: solid 0.5px var(--MI_THEME-divider);
+	border-bottom: solid 0.5px transparent;
 	width: 100%;
+	color: var(--MI_THEME-pageHeaderFg);
+}
+
+@container style(--MI_THEME-pageHeaderBg: var(--MI_THEME-bg)) {
+	.root {
+		border-bottom: solid 0.5px var(--MI_THEME-divider);
+	}
 }
 
 .upper,
-- 
cgit v1.2.3-freya