Support for custom font size and family
Cagatay Civici
parent
b8ef0922f5
commit
904b1becd1
|
|
@ -48,7 +48,8 @@ export default {
|
|||
refreshACTokens: this.refreshACTokens,
|
||||
saveTheme: this.saveTheme,
|
||||
downloadTheme: this.downloadTheme,
|
||||
applyTheme: this.applyTheme
|
||||
applyTheme: this.applyTheme,
|
||||
applyFont: this.applyFont
|
||||
}
|
||||
};
|
||||
},
|
||||
|
|
@ -91,7 +92,7 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
async updateTheme(theme) {
|
||||
async saveTheme(theme) {
|
||||
const { error } = await $fetch(this.designerApiBase + '/theme/update', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
|
|
@ -108,7 +109,7 @@ export default {
|
|||
},
|
||||
applyTheme(theme) {
|
||||
if (this.$appState.designer.licenseKey) {
|
||||
this.updateTheme(theme);
|
||||
this.saveTheme(theme);
|
||||
}
|
||||
|
||||
updatePreset(theme.preset);
|
||||
|
|
@ -145,6 +146,36 @@ export default {
|
|||
},
|
||||
openDashboard() {
|
||||
this.$appState.designer.activeView = 'dashboard';
|
||||
},
|
||||
applyFont(fontFamily) {
|
||||
if (fontFamily !== 'Inter var') {
|
||||
this.loadFont(fontFamily, 400);
|
||||
this.loadFont(fontFamily, 500);
|
||||
this.loadFont(fontFamily, 600);
|
||||
this.loadFont(fontFamily, 700);
|
||||
} else {
|
||||
document.body.style.fontFamily = `"Inter var", sans-serif`;
|
||||
}
|
||||
},
|
||||
async loadFont(fontFamily, weight) {
|
||||
const fontFamilyPath = fontFamily.toLowerCase().replace(/\s+/g, '-');
|
||||
const fontUrl = `https://fonts.bunny.net/${fontFamilyPath}/files/${fontFamilyPath}-latin-${weight}-normal.woff2`;
|
||||
|
||||
const font = new FontFace(fontFamily, `url(${fontUrl})`, {
|
||||
weight: weight.toString(),
|
||||
style: 'normal'
|
||||
});
|
||||
|
||||
try {
|
||||
const loadedFont = await font.load();
|
||||
|
||||
document.fonts.add(loadedFont);
|
||||
document.body.style.fontFamily = `"${fontFamily}", sans-serif`;
|
||||
|
||||
return loadedFont;
|
||||
} catch (error) {
|
||||
// silent fail as some fonts may have not all the font weights
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -177,6 +177,8 @@ export default {
|
|||
};
|
||||
|
||||
usePreset(this.$appState.designer.theme.preset);
|
||||
this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
|
||||
document.documentElement.style.fontSize = this.$appState.designer.theme.config.baseFontSize;
|
||||
this.designerService.refreshACTokens();
|
||||
this.$appState.designer.activeView = 'editor';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<Tab value="1">Semantic</Tab>
|
||||
<Tab value="2" :disabled="!isComponentRoute">Component</Tab>
|
||||
<Tab value="3">Custom</Tab>
|
||||
<Tab value="4" class="ml-auto">Settings</Tab>
|
||||
</TabList>
|
||||
<TabPanels class="!px-0">
|
||||
<TabPanel value="0">
|
||||
|
|
@ -65,6 +66,9 @@
|
|||
<TabPanel value="3">
|
||||
<DesignCustomTokens />
|
||||
</TabPanel>
|
||||
<TabPanel value="4">
|
||||
<DesignSettings />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<section class="mb-6">
|
||||
<div class="text-lg font-semibold mb-4">Font</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="mb-4">
|
||||
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div>
|
||||
<select v-model="$appState.designer.theme.config.baseFontSize" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20">
|
||||
<option v-for="fontSize of fontSizes" :key="fontSize" :value="fontSize">{{ fontSize }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Family</div>
|
||||
<select v-model="$appState.designer.theme.config.fontFamily" @change="changeFont" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48">
|
||||
<option v-for="font of fonts" :key="font" :value="font">{{ font }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mb-6">
|
||||
<div class="block text-lg font-semibold mb-2">Migration Assistant</div>
|
||||
<span class="block text-muted-color leading-6 mb-4">Automatically update your themes to the latest version by adding any missing tokens.</span>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
@click="checkForUpdates"
|
||||
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
|
||||
>
|
||||
Check for Updates
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['designerService'],
|
||||
data() {
|
||||
return {
|
||||
fontSizes: ['12px', '13px', '14px', '15px', '16px', '17px', '18px'],
|
||||
fonts: ['DM Sans', 'Inter var', 'Lato', 'Poppins', 'Public Sans', 'Roboto', 'Open Sans', 'Quicksand']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeFont() {
|
||||
this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
|
||||
this.designerService.saveTheme(this.$appState.designer.theme);
|
||||
},
|
||||
changeBaseFontSize() {
|
||||
document.documentElement.style.fontSize = this.$appState.designer.theme.config.baseFontSize;
|
||||
this.designerService.saveTheme(this.$appState.designer.theme);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue