From a7f677aafcf58e112c7da8aa2c3f9a62b741982f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20K=C3=BCttner?= <kuettner.hannes@gmail.com>
Date: Fri, 22 Dec 2023 15:40:58 +0100
Subject: [PATCH] fix: Respect Directus theming

---
 src/group-tabs.vue |  2 +-
 src/tab-button.vue | 34 ++++++++++++----------------------
 src/tab-group.vue  |  4 ++--
 src/tab-panel.vue  | 29 -----------------------------
 4 files changed, 15 insertions(+), 54 deletions(-)

diff --git a/src/group-tabs.vue b/src/group-tabs.vue
index bf4ef84..5acb219 100644
--- a/src/group-tabs.vue
+++ b/src/group-tabs.vue
@@ -114,7 +114,7 @@ function useComputedGroup() {
 <style scoped lang="scss">
 .group-tabs {
 	.tab-panel {
-		margin-top: var(--form-horizontal-gap);
+		margin-top: var(--theme--form--row-gap);
 	}
 }
 </style>
diff --git a/src/tab-button.vue b/src/tab-button.vue
index af61caf..9464aa6 100644
--- a/src/tab-button.vue
+++ b/src/tab-button.vue
@@ -34,51 +34,41 @@ const { t } = useI18n();
 </template>
 
 <style scoped lang="scss">
-.v-button {
+.tab-button {
 	--v-button-background-color: transparent;
 	--v-button-background-color-hover: transparent;
 	--v-button-border-color: transparent;
 	--v-button-width: unset;
 
-	:deep(.button) {
-		border-color: var(--v-button-border-color);
-
-		.content {
-			overflow: visible;
-		}
-
-		&:focus {
-			--v-button-border-color: var(--primary);
-		}
+	& :deep(.content) {
+		overflow: visible;
 	}
 
 	&[aria-selected='true'] {
-		--v-button-border-color: var(--background-normal-alt);
-		--v-button-background-color: var(--background-normal-alt);
-		--v-button-background-color-hover: var(--background-normal-alt);
+		--v-button-border-color: var(--theme--background-accent);
+		--v-button-background-color: var(--theme--background-accent);
+		--v-button-background-color-hover: var(--theme--background-accent);
 	}
 
 	&:not([aria-selected='true']):hover {
-		--v-button-border-color: var(--background-normal);
-		--v-button-background-color: var(--background-normal);
-		--v-button-background-color-hover: var(--background-normal);
+		color: var(--theme--foreground--accent);
 	}
 
 	&:hover,
 	&[aria-selected='true'] {
 		.field-name,
 		.icon {
-			color: var(--foreground-normal-alt);
+			color: var(--theme--foreground-accent);
 		}
 
 		.edit-dot {
-			background-color: var(--foreground-normal);
+			background-color: var(--theme--foreground);
 		}
 	}
 
 	.field-name,
 	.icon {
-		color: var(--foreground-normal);
+		color: var(--theme--foreground);
 		transition: color var(--fast) var(--transition);
 	}
 
@@ -93,7 +83,7 @@ const { t } = useI18n();
 		display: block;
 		width: 4px;
 		height: 4px;
-		background-color: var(--foreground-subdued);
+		background-color: var(--theme--foreground-subdued);
 		border-radius: 4px;
 		content: '';
 	}
@@ -101,6 +91,6 @@ const { t } = useI18n();
 
 .warning {
 	margin-left: 8px;
-	color: var(--danger);
+	color: var(--theme--danger);
 }
 </style>
diff --git a/src/tab-group.vue b/src/tab-group.vue
index caa8e1b..3f6ccc7 100644
--- a/src/tab-group.vue
+++ b/src/tab-group.vue
@@ -68,8 +68,8 @@ function onKeyDown(event: KeyboardEvent) {
 	display: flex;
 	gap: 0 0.5rem;
 	padding: 2px;
-	border-radius: var(--border-radius-outline);
-	background-color: var(--background-subdued);
+	border-radius: var(--theme--border-radius);
+	background-color: var(--theme--background-subdued);
 	flex-wrap: wrap;
 }
 </style>
diff --git a/src/tab-panel.vue b/src/tab-panel.vue
index 3e2fb1d..d23da7e 100644
--- a/src/tab-panel.vue
+++ b/src/tab-panel.vue
@@ -47,32 +47,3 @@ const { fieldsInSection } = useGroupSection(toRefs(props));
 		/>
 	</div>
 </template>
-
-<style lang="scss" scoped>
-.accordion-section {
-	border-top: var(--border-width) solid var(--border-normal);
-
-	&:last-child {
-		border-bottom: var(--border-width) solid var(--border-normal);
-	}
-}
-
-.icon {
-	margin-right: 12px;
-	transform: rotate(-90deg);
-	transition: transform var(--fast) var(--transition);
-
-	&.active {
-		transform: rotate(0);
-	}
-}
-
-.warning {
-	margin-left: 8px;
-	color: var(--danger);
-}
-
-.fields {
-	margin: var(--form-vertical-gap) 0;
-}
-</style>