Theme fixes (directus#20455)

Co-authored-by: Azri Kahar <[email protected]>
motionbank · Nov 17, 2023 · 9b443f8 · 9b443f8
1 parent 90422c3
commit 9b443f8
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 16 deletions.
diff --git a/.changeset/nice-rice-eat.md b/.changeset/nice-rice-eat.md
@@ -0,0 +1,6 @@
+---
+"@directus/app": patch
+"@directus/themes": patch
+---
+
+Fixed form paddings in default dark theme, enhanced theme selector interface
diff --git a/app/src/interfaces/_system/system-theme/system-theme.vue b/app/src/interfaces/_system/system-theme/system-theme.vue
@@ -39,7 +39,7 @@ const valueWithDefault = computed(() => {
 </script>
 
 <template>
-	<div class="interface-system-theme" :class="{ wrap: items.length > 2 }">
+	<div class="interface-system-theme">
 		<template v-if="includeNull">
 			<button :class="{ active: value === null }" class="theme" @click="$emit('input', null)">
 				<ThemePreview :dark-mode="appearance === 'dark'" :theme="systemTheme" />
@@ -72,11 +72,7 @@ const valueWithDefault = computed(() => {
 .interface-system-theme {
 	display: grid;
 	gap: 24px;
-	grid-template-columns: repeat(auto-fit, 180px);
-
-	&.wrap {
-		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-	}
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .theme {

diff --git a/app/src/interfaces/_system/system-theme/theme-preview.vue b/app/src/interfaces/_system/system-theme/theme-preview.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useThemeConfiguration } from '@/composables/use-theme-configuration';
 import { rulesToCssVars, useTheme } from '@directus/themes';
 import { computed } from 'vue';
 
@@ -7,7 +8,9 @@ const props = defineProps<{
 	theme: string | null;
 }>();
 
-const { theme } = useTheme(props.darkMode, props.theme, props.theme, {}, {});
+const { themeLightOverrides, themeDarkOverrides } = useThemeConfiguration();
+
+const { theme } = useTheme(props.darkMode, props.theme, props.theme, themeLightOverrides, themeDarkOverrides);
 
 const localVars = computed(() => {
 	return rulesToCssVars(theme.value.rules);

diff --git a/packages/themes/src/themes/dark/default.ts b/packages/themes/src/themes/dark/default.ts
@@ -131,14 +131,19 @@ export default defineTheme({
 			title: {
 				foreground: 'var(--theme--foreground-accent)',
 				fontFamily: 'var(--theme--fonts--display--font-family)',
+				fontWeight: 'var(--theme--fonts--display--font-weight)',
 			},
 		},
 
 		form: {
+			columnGap: '32px',
+			rowGap: '40px',
+
 			field: {
 				label: {
 					foreground: 'var(--theme--foreground-accent)',
 					fontFamily: 'var(--theme--fonts--sans--font-family)',
+					fontWeight: '600',
 				},
 				input: {
 					background: 'var(--theme--background)',
@@ -156,6 +161,7 @@ export default defineTheme({
 					boxShadowFocus: '0 0 16px -8px var(--theme--primary)',
 
 					height: '60px',
+					padding: '16px',
 				},
 			},
 		},
@@ -213,6 +219,7 @@ export default defineTheme({
 							boxShadowFocus: 'var(--theme--form--field--input--box-shadow-focus)',
 
 							height: '52px',
+							padding: '12px',
 						},
 					},
 				},
@@ -255,6 +262,7 @@ export default defineTheme({
 						boxShadowFocus: 'var(--theme--form--field--input--box-shadow-focus)',
 
 						height: 'var(--theme--form--field--input--height)',
+						padding: 'var(--theme--form--field--input--padding)',
 					},
 				},
 			},

diff --git a/packages/themes/src/themes/light/default.ts b/packages/themes/src/themes/light/default.ts
@@ -110,7 +110,7 @@ export default defineTheme({
 				backgroundHover: 'var(--theme--navigation--background-accent)',
 				backgroundActive: 'var(--theme--navigation--background-accent)',
 
-				fontFamily: 'var(--theme--font-family-sans-serif)',
+				fontFamily: 'var(--theme--fonts--sans--font-family)',
 
 				divider: {
 					borderColor: 'var(--theme--border-color-accent)',
@@ -126,7 +126,7 @@ export default defineTheme({
 			boxShadow: '0 4px 7px -4px rgb(0 0 0 / 0.2)',
 			headline: {
 				foreground: 'var(--theme--foreground-subdued)',
-				fontFamily: 'var(--theme--font-family-sans-serif)',
+				fontFamily: 'var(--theme--fonts--sans--font-family)',
 			},
 			title: {
 				foreground: 'var(--theme--foreground-accent)',
@@ -142,7 +142,7 @@ export default defineTheme({
 			field: {
 				label: {
 					foreground: 'var(--theme--foreground-accent)',
-					fontFamily: 'var(--theme--font-family-sans-serif)',
+					fontFamily: 'var(--theme--fonts--sans--font-family)',
 					fontWeight: '600',
 				},
 				input: {
@@ -169,7 +169,7 @@ export default defineTheme({
 		sidebar: {
 			background: 'var(--theme--background-normal)',
 			foreground: 'var(--theme--foreground-subdued)',
-			fontFamily: 'var(--theme--font-family-sans-serif)',
+			fontFamily: 'var(--theme--fonts--sans--font-family)',
 			borderColor: 'transparent',
 			borderWidth: '0px',
 
@@ -189,7 +189,7 @@ export default defineTheme({
 					backgroundHover: 'var(--theme--sidebar--section--toggle--background)',
 					backgroundActive: 'var(--theme--sidebar--section--toggle--background)',
 
-					fontFamily: 'var(--theme--font-family-sans-serif)',
+					fontFamily: 'var(--theme--fonts--sans--font-family)',
 
 					borderColor: 'transparent',
 					borderWidth: '0px',

diff --git a/packages/themes/src/themes/light/minimal.ts b/packages/themes/src/themes/light/minimal.ts
@@ -87,12 +87,11 @@ export default defineTheme({
 					field: {
 						input: {
 							height: '42px',
-						}
-					}
-				}
+						},
+					},
+				},
 			},
 		},
-		fontFamilyDisplay: 'system-ui',
 		public: {
 			art: {
 				background: 'color-mix(in srgb, #FFFFFF, var(--project-color) 10%)',
@@ -110,5 +109,10 @@ export default defineTheme({
 		secondaryAccent: '#E2E8F0',
 		secondaryBackground: '#F1F5F9',
 		secondarySubdued: '#F8FAFC',
+		fonts: {
+			display: {
+				fontFamily: 'system-ui',
+			},
+		},
 	},
 });