refactor: remove tinycolor from MkFolder + a11y

packages/client/src/components/MkFolder.vue

@@ -1,13 +1,16 @@
 <template>
-	<div v-size="{ max: [500] }" class="ssazuxis">
+	<section class="ssazuxis">
 		<header
 			class="_button"
-			:style="{ background: bg }"
 			@click="showBody = !showBody"
 		>
 			<div class="title"><slot name="header"></slot></div>
 			<div class="divider"></div>
-			<button class="_button">
+			<button 
+				class="_button"
+				:aria-expanded="showBody"
+				:aria-controls="bodyId"
+			>
 				<template v-if="showBody"
 					><i class="ph-caret-up ph-bold ph-lg"></i
 				></template>
@@ -23,16 +26,16 @@
 			@leave="leave"
 			@after-leave="afterLeave"
 		>
-			<div v-show="showBody">
+			<div v-show="showBody" :id="bodyId">
 				<slot></slot>
 			</div>
 		</transition>
-	</div>
+	</section>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import tinycolor from "tinycolor2";
+import { getUniqueId } from "@/os";
 
 const localStoragePrefix = "ui:folder:";
 
@@ -51,7 +54,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			bg: null,
+			bodyId: getUniqueId(),
 			showBody:
 				this.persistKey &&
 				localStorage.getItem(localStoragePrefix + this.persistKey)
@@ -71,27 +74,6 @@ export default defineComponent({
 			}
 		},
 	},
-	mounted() {
-		function getParentBg(el: Element | null): string {
-			if (el == null || el.tagName === "BODY") return "var(--bg)";
-			const bg = el.style.background || el.style.backgroundColor;
-			if (bg) {
-				return bg;
-			} else {
-				return getParentBg(el.parentElement);
-			}
-		}
-		const rawBg = getParentBg(this.$el);
-		const bg = tinycolor(
-			rawBg.startsWith("var(")
-				? getComputedStyle(document.documentElement).getPropertyValue(
-						rawBg.slice(4, -1),
-				  )
-				: rawBg,
-		);
-		bg.setAlpha(0.85);
-		this.bg = bg.toRgbString();
-	},
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
@@ -161,6 +143,15 @@ export default defineComponent({
 			transparent
 		);
 
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+			background: var(--bg);
+			opacity: 0.85;
+			z-index: -1;
+		}
+
 		> .title {
 			margin: 0;
 			padding: 12px 16px 12px 0;
@@ -185,13 +176,5 @@ export default defineComponent({
 			padding: 12px 0 12px 16px;
 		}
 	}
-
-	&.max-width_500px {
-		> header {
-			> .title {
-				padding: 8px 10px 8px 0;
-			}
-		}
-	}
 }
 </style>