fix: Respect Directus theming

hanneskuettner · Dec 22, 2023 · a7f677a · a7f677a
1 parent 77ef568
commit a7f677a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 54 deletions.
diff --git 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
@@ -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,14 +83,14 @@ const { t } = useI18n();
 		display: block;
 		width: 4px;
 		height: 4px;
-		background-color: var(--foreground-subdued);
+		background-color: var(--theme--foreground-subdued);
 		border-radius: 4px;
 		content: '';
 	}
 }
 
 .warning {
 	margin-left: 8px;
-	color: var(--danger);
+	color: var(--theme--danger);
 }
 </style>
diff --git 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
@@ -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>