From fdd27c8d00e4cbdb79b8ff4a3a633d4ae44260d4 Mon Sep 17 00:00:00 2001 From: Rijk van Zanten Date: Thu, 26 Oct 2023 11:59:46 -0400 Subject: [PATCH] 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 | 6 ++++++ app/src/components/v-form/form-field-label.vue | 4 ++++ app/src/components/v-list-item-content.vue | 2 +- app/src/views/private/components/header-bar.vue | 2 ++ app/src/views/private/components/project-info.vue | 1 + app/src/views/private/components/sidebar-detail.vue | 1 + app/src/views/private/private-view.vue | 2 ++ packages/themes/src/schema.ts | 8 ++++++++ packages/themes/src/themes/dark-directus.ts | 8 ++++++++ packages/themes/src/themes/light-directus.ts | 8 ++++++++ 10 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 .changeset/shiny-planes-knock.md diff --git a/.changeset/shiny-planes-knock.md b/.changeset/shiny-planes-knock.md new file mode 100644 index 0000000000..ed37660cb0 --- /dev/null +++ b/.changeset/shiny-planes-knock.md @@ -0,0 +1,6 @@ +--- +'@directus/themes': minor +'@directus/app': minor +--- + +Added support for overriding fonts per scope diff --git a/app/src/components/v-form/form-field-label.vue b/app/src/components/v-form/form-field-label.vue index ef8771b885..06be4e135f 100644 --- a/app/src/components/v-form/form-field-label.vue +++ b/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); +} diff --git a/app/src/components/v-list-item-content.vue b/app/src/components/v-list-item-content.vue index c2e0a5dd5c..0dcbb9bda7 100644 --- a/app/src/components/v-list-item-content.vue +++ b/app/src/components/v-list-item-content.vue @@ -7,7 +7,7 @@ diff --git a/app/src/views/private/components/header-bar.vue b/app/src/views/private/components/header-bar.vue index 1d0642905c..143ba4a954 100644 --- a/app/src/views/private/components/header-bar.vue +++ b/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) { diff --git a/app/src/views/private/components/project-info.vue b/app/src/views/private/components/project-info.vue index 70ef64d82e..1cea67348e 100644 --- a/app/src/views/private/components/project-info.vue +++ b/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 { diff --git a/app/src/views/private/components/sidebar-detail.vue b/app/src/views/private/components/sidebar-detail.vue index 3e540f0a33..65dad3c041 100644 --- a/app/src/views/private/components/sidebar-detail.vue +++ b/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 { diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue index 15672e7449..92e1cb0c0c 100644 --- a/app/src/views/private/private-view.vue +++ b/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; diff --git a/packages/themes/src/schema.ts b/packages/themes/src/schema.ts index e0ce29a530..667c36443e 100644 --- a/packages/themes/src/schema.ts +++ b/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, }), }), }), diff --git a/packages/themes/src/themes/dark-directus.ts b/packages/themes/src/themes/dark-directus.ts index a308b14349..ed838ea35c 100644 --- a/packages/themes/src/themes/dark-directus.ts +++ b/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)', }, }, }, diff --git a/packages/themes/src/themes/light-directus.ts b/packages/themes/src/themes/light-directus.ts index db7f3e6df6..0952be9cb3 100644 --- a/packages/themes/src/themes/light-directus.ts +++ b/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)', }, }, },