Add theme font family overrides per scope (#20204)

* Add scope for project info indicator font

* Add navigation list scope for font

* Set font for navigation bar based on theme

* Inherit font family by default

* Fix title font family not working

* Add headline font scope

* Add field label font

* Add font scope for sidebar content

* Add changeset

.changeset/shiny-planes-knock.md

@@ -0,0 +1,6 @@
+---
+'@directus/themes': minor
+'@directus/app': minor
+---
+
+Added support for overriding fonts per scope

app/src/components/v-form/form-field-label.vue

@@ -179,4 +179,8 @@ const { t } = useI18n();
 		}
 	}
 }
+
+.type-label {
+	font-family: var(--theme--form--field--label--font-family);
+}
 </style>

app/src/components/v-list-item-content.vue

@@ -7,7 +7,7 @@
 <style>
 body {
 	--v-list-item-content-padding: 9px 0;
-	--v-list-item-content-font-family: var(--theme--font-family-sans-serif);
+	--v-list-item-content-font-family: inherit;
 }
 </style>
 

app/src/views/private/components/header-bar.vue

@@ -146,6 +146,7 @@ onUnmounted(() => {
 			white-space: nowrap;
 			opacity: 1;
 			transition: opacity var(--fast) var(--transition);
+			font-family: var(--theme--header--headline--font-family);
 
 			@media (min-width: 600px) {
 				top: -2px;
@@ -165,6 +166,7 @@ onUnmounted(() => {
 				overflow: hidden;
 				white-space: nowrap;
 				text-overflow: ellipsis;
+				font-family: var(--theme--header--title--font-family);
 			}
 
 			:deep(.type-title) {

app/src/views/private/components/project-info.vue

@@ -40,6 +40,7 @@ const descriptor = computed(() => serverStore.info?.project?.project_descriptor)
 
 	.name {
 		margin-right: 8px;
+		font-family: var(--theme--navigation--project--font-family);
 	}
 
 	.descriptor {

app/src/views/private/components/sidebar-detail.vue

@@ -140,6 +140,7 @@ const { sidebarOpen } = toRefs(appStore);
 		overflow: hidden;
 		white-space: nowrap;
 		transform: translateY(-50%);
+		font-family: var(--theme--sidebar--section--toggle--font-family);
 	}
 
 	.scroll-container {

app/src/views/private/private-view.vue

@@ -386,6 +386,7 @@ function getWidth(input: unknown, fallback: number): number {
 		font-size: 0;
 		transform: translateX(-100%);
 		transition: transform var(--slow) var(--transition);
+		font-family: var(--theme--navigation--list--font-family);
 
 		&.is-open {
 			transform: translateX(0);
@@ -500,6 +501,7 @@ function getWidth(input: unknown, fallback: number): number {
 		background-color: var(--theme--sidebar--background);
 		transform: translateX(100%);
 		transition: transform var(--slow) var(--transition);
+		font-family: var(--theme--sidebar--font-family);
 
 		.spacer {
 			flex-grow: 1;

packages/themes/src/schema.ts

@@ -52,6 +52,7 @@ const Rules = Type.Object({
 		project: Type.Object({
 			background: Color,
 			foreground: Color,
+			fontFamily: FontFamily,
 		}),
 
 		modules: Type.Object({
@@ -81,6 +82,8 @@ const Rules = Type.Object({
 			background: Color,
 			backgroundHover: Color,
 			backgroundActive: Color,
+
+			fontFamily: FontFamily,
 		}),
 	}),
 
@@ -88,6 +91,7 @@ const Rules = Type.Object({
 		background: Color,
 		headline: Type.Object({
 			foreground: Color,
+			fontFamily: FontFamily,
 		}),
 		title: Type.Object({
 			foreground: Color,
@@ -99,6 +103,7 @@ const Rules = Type.Object({
 		field: Type.Object({
 			label: Type.Object({
 				foreground: Color,
+				fontFamily: FontFamily,
 			}),
 			input: Type.Object({
 				background: Color,
@@ -111,6 +116,7 @@ const Rules = Type.Object({
 	sidebar: Type.Object({
 		background: Color,
 		foreground: Color,
+		fontFamily: FontFamily,
 
 		section: Type.Object({
 			toggle: Type.Object({
@@ -127,6 +133,8 @@ const Rules = Type.Object({
 				background: Color,
 				backgroundHover: Color,
 				backgroundActive: Color,
+
+				fontFamily: FontFamily,
 			}),
 		}),
 	}),

packages/themes/src/themes/dark-directus.ts

@@ -46,6 +46,7 @@ export const theme: Theme = {
 			project: {
 				background: '#30363d',
 				foreground: 'var(--theme--foreground-accent)',
+				fontFamily: 'var(--theme--font-family-sans-serif)',
 			},
 
 			modules: {
@@ -75,6 +76,8 @@ export const theme: Theme = {
 				background: 'transparent',
 				backgroundHover: '#30363d',
 				backgroundActive: '#30363d',
+
+				fontFamily: 'var(--theme--font-family-sans-serif)',
 			},
 		},
 
@@ -82,6 +85,7 @@ export const theme: Theme = {
 			background: 'var(--theme--background)',
 			headline: {
 				foreground: 'var(--theme--foreground-subdued)',
+				fontFamily: 'var(--theme--font-family-sans-serif)',
 			},
 			title: {
 				foreground: 'var(--theme--foreground-accent)',
@@ -93,6 +97,7 @@ export const theme: Theme = {
 			field: {
 				label: {
 					foreground: 'var(--theme--foreground-accent)',
+					fontFamily: 'var(--theme--font-family-sans-serif)',
 				},
 				input: {
 					background: 'var(--theme--background)',
@@ -105,6 +110,7 @@ export const theme: Theme = {
 		sidebar: {
 			background: '#21262e',
 			foreground: 'var(--theme--foreground-subdued)',
+			fontFamily: 'var(--theme--font-family-sans-serif)',
 
 			section: {
 				toggle: {
@@ -121,6 +127,8 @@ export const theme: Theme = {
 					background: '#30363d',
 					backgroundHover: 'var(--theme--sidebar--section--toggle--background)',
 					backgroundActive: 'var(--theme--sidebar--section--toggle--background)',
+
+					fontFamily: 'var(--theme--font-family-sans-serif)',
 				},
 			},
 		},

packages/themes/src/themes/light-directus.ts

@@ -46,6 +46,7 @@ export const theme: Theme = {
 			project: {
 				background: '#e4eaf1',
 				foreground: 'var(--theme--foreground-accent)',
+				fontFamily: 'var(--theme--font-family-sans-serif)',
 			},
 
 			modules: {
@@ -75,6 +76,8 @@ export const theme: Theme = {
 				background: 'transparent',
 				backgroundHover: '#e4eaf1',
 				backgroundActive: '#e4eaf1',
+
+				fontFamily: 'var(--theme--font-family-sans-serif)',
 			},
 		},
 
@@ -82,6 +85,7 @@ export const theme: Theme = {
 			background: 'var(--theme--background)',
 			headline: {
 				foreground: 'var(--theme--foreground-subdued)',
+				fontFamily: 'var(--theme--font-family-sans-serif)',
 			},
 			title: {
 				foreground: 'var(--theme--foreground-accent)',
@@ -93,6 +97,7 @@ export const theme: Theme = {
 			field: {
 				label: {
 					foreground: 'var(--theme--foreground-accent)',
+					fontFamily: 'var(--theme--font-family-sans-serif)',
 				},
 				input: {
 					background: 'var(--theme--background)',
@@ -105,6 +110,7 @@ export const theme: Theme = {
 		sidebar: {
 			background: '#f0f4f9',
 			foreground: 'var(--theme--foreground-subdued)',
+			fontFamily: 'var(--theme--font-family-sans-serif)',
 
 			section: {
 				toggle: {
@@ -121,6 +127,8 @@ export const theme: Theme = {
 					background: '#e4eaf1',
 					backgroundHover: 'var(--theme--sidebar--section--toggle--background)',
 					backgroundActive: 'var(--theme--sidebar--section--toggle--background)',
+
+					fontFamily: 'var(--theme--font-family-sans-serif)',
 				},
 			},
 		},