From 8d99f69c9005a31571ada91fc155ed7bccae1a82 Mon Sep 17 00:00:00 2001
From: Chloe Kudryavtsev <code@toast.bunkerlabs.net>
Date: Thu, 11 Aug 2022 06:18:14 -0400
Subject: [PATCH] client: remove _acrylic

Acrylic is defined as having a background
similar to panel + transparency and backdrop.
Simply change everything that is _acrylic to be _panel instead.
---
 packages/client/src/components/emoji-picker.section.vue | 2 +-
 packages/client/src/components/emoji-picker.vue         | 6 +++---
 packages/client/src/components/notification-toast.vue   | 2 +-
 packages/client/src/components/ui/tooltip.vue           | 2 +-
 packages/client/src/pages/settings/profile.vue          | 2 +-
 packages/client/src/pages/welcome.entrance.a.vue        | 6 ++----
 packages/client/src/style.scss                          | 6 ------
 packages/client/src/themes/_dark.json5                  | 2 --
 packages/client/src/themes/_light.json5                 | 2 --
 packages/client/src/themes/d-astro.json5                | 2 --
 packages/client/src/themes/d-pumpkin.json5              | 2 --
 packages/client/src/themes/l-vivid.json5                | 2 --
 packages/client/src/ui/_common_/upload.vue              | 2 +-
 packages/client/src/ui/deck/column.vue                  | 2 +-
 14 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/packages/client/src/components/emoji-picker.section.vue b/packages/client/src/components/emoji-picker.section.vue
index 901bc76ac..6d74582b4 100644
--- a/packages/client/src/components/emoji-picker.section.vue
+++ b/packages/client/src/components/emoji-picker.section.vue
@@ -1,6 +1,6 @@
 <template>
 <section>
-	<header class="_acrylic" @click="shown = !shown">
+	<header class="_panel" @click="shown = !shown">
 		<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
 	</header>
 	<div v-if="shown">
diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue
index 4d737c103..92669d287 100644
--- a/packages/client/src/components/emoji-picker.vue
+++ b/packages/client/src/components/emoji-picker.vue
@@ -46,7 +46,7 @@
 			</section>
 
 			<section>
-				<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
+				<header class="_panel"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
 				<div>
 					<button
 						v-for="emoji in recentlyUsedEmojis"
@@ -60,11 +60,11 @@
 			</section>
 		</div>
 		<div>
-			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
+			<header class="_panel">{{ i18n.ts.customEmojis }}</header>
 			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
 		</div>
 		<div>
-			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
+			<header class="_panel">{{ i18n.ts.emoji }}</header>
 			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
 		</div>
 	</div>
diff --git a/packages/client/src/components/notification-toast.vue b/packages/client/src/components/notification-toast.vue
index 2278cd106..5c88b321a 100644
--- a/packages/client/src/components/notification-toast.vue
+++ b/packages/client/src/components/notification-toast.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-notification-toast" :style="{ zIndex }">
 	<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="emit('closed')">
-		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
+		<XNotification v-if="showing" :notification="notification" class="notification _panel"/>
 	</transition>
 </div>
 </template>
diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue
index 152c939a1..64a9709c1 100644
--- a/packages/client/src/components/ui/tooltip.vue
+++ b/packages/client/src/components/ui/tooltip.vue
@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
-	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
+	<div v-show="showing" ref="el" class="buebdbiu _panel _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
 		<slot>
 			<Mfm v-if="asMfm" :text="text"/>
 			<span v-else>{{ text }}</span>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 6b60148df..1e733aa62 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
-		<div class="avatar _acrylic">
+		<div class="avatar _panel">
 			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
 			<MkButton primary class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
 		</div>
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 240177c9d..d03403268 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -15,7 +15,7 @@
 		</div>
 		<div class="main">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+			<button class="_button _panel menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 			<div class="fg">
 				<h1>
 					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
@@ -272,9 +272,7 @@ function showMenu(ev) {
 			left: 0;
 			right: 0;
 			margin: auto;
-			background: var(--acrylicPanel);
-			-webkit-backdrop-filter: var(--blur, blur(15px));
-			backdrop-filter: var(--blur, blur(15px));
+			background: var(--panel);
 			border-radius: 999px;
 			overflow: clip;
 			width: 800px;
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index d87a50ee3..54358e4ee 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -367,12 +367,6 @@ hr {
 	}
 }
 
-._acrylic {
-	background: var(--acrylicPanel);
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
-}
-
 ._formBlock {
 	margin: 1.5em 0;
 }
diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5
index b036fe037..cda66a508 100644
--- a/packages/client/src/themes/_dark.json5
+++ b/packages/client/src/themes/_dark.json5
@@ -15,7 +15,6 @@
 		accentedBg: ':alpha<0.15<@accent',
 		focus: ':alpha<0.3<@accent',
 		bg: '#000',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#dadada',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -29,7 +28,6 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@panel',
diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5
index 138a1b111..50c5388e0 100644
--- a/packages/client/src/themes/_light.json5
+++ b/packages/client/src/themes/_light.json5
@@ -15,7 +15,6 @@
 		accentedBg: ':alpha<0.15<@accent',
 		focus: ':alpha<0.3<@accent',
 		bg: '#fff',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#5f5f5f',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -29,7 +28,6 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: ':alpha<0.7<@panel',
diff --git a/packages/client/src/themes/d-astro.json5 b/packages/client/src/themes/d-astro.json5
index c6a927ec3..7b9034020 100644
--- a/packages/client/src/themes/d-astro.json5
+++ b/packages/client/src/themes/d-astro.json5
@@ -28,7 +28,6 @@
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
 		buttonBg: 'rgba(255, 255, 255, 0.05)',
-		acrylicBg: ':alpha<0.5<@bg',
 		cwHoverBg: '#707b97',
 		indicator: '@accent',
 		mentionMe: '#fb5d38',
@@ -42,7 +41,6 @@
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
diff --git a/packages/client/src/themes/d-pumpkin.json5 b/packages/client/src/themes/d-pumpkin.json5
index 064ca4577..ff2bc9509 100644
--- a/packages/client/src/themes/d-pumpkin.json5
+++ b/packages/client/src/themes/d-pumpkin.json5
@@ -49,7 +49,6 @@
 		success: '#86b300',
 		buttonBg: 'rgba(255, 255, 255, 0.05)',
 		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
 		cwHoverBg: '#707b97',
 		indicator: '@accent',
 		mentionMe: '@accent',
@@ -64,7 +63,6 @@
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@indicator',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
diff --git a/packages/client/src/themes/l-vivid.json5 b/packages/client/src/themes/l-vivid.json5
index b3c08f38a..66d97f3a0 100644
--- a/packages/client/src/themes/l-vivid.json5
+++ b/packages/client/src/themes/l-vivid.json5
@@ -31,7 +31,6 @@
 		modalBg: 'rgba(0, 0, 0, 0.3)',
 		success: '#86b300',
 		buttonBg: 'rgba(0, 0, 0, 0.05)',
-		acrylicBg: ':alpha<0.5<@bg',
 		cwHoverBg: '#bbc4ce',
 		indicator: '@accent',
 		mentionMe: '@mention',
@@ -45,7 +44,6 @@
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 8324e9e75..53b846902 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-uploader _acrylic" :style="{ zIndex }">
+<div class="mk-uploader _panel" :style="{ zIndex }">
 	<ol v-if="uploads.length > 0">
 		<li v-for="ctx in uploads" :key="ctx.id">
 			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index aaba8ff13..f6b7305fa 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -283,7 +283,7 @@ function onDrop(ev) {
 	}
 
 	&.naked {
-		background: var(--acrylicBg) !important;
+		background: var(--bg) !important;
 		-webkit-backdrop-filter: var(--blur, blur(10px));
 		backdrop-filter: var(--blur, blur(10px));