Refactored font settings

pull/7035/merge
Cagatay Civici 2025-01-01 14:44:27 +03:00
parent 681af3955c
commit e630a39d50
4 changed files with 21 additions and 29 deletions

View File

@ -107,8 +107,7 @@ export default {
body: {
key: theme.key,
preset: theme.preset,
config: theme.config,
license_key: this.$appState.designer.licenseKey
config: theme.config
}
});
@ -168,15 +167,14 @@ export default {
}
},
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 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'
});
const loadedFont = await font.load();
document.fonts.add(loadedFont);

View File

@ -108,8 +108,8 @@ export default {
name: this.themeName,
preset: newPreset,
config: {
font_size: '14px',
font_family: 'Inter var'
fontSize: '14px',
fontFamily: 'Inter var'
}
}
});
@ -136,8 +136,8 @@ export default {
name: this.themeName,
figma_tokens: this.figmaData,
config: {
font_size: '14px',
font_family: 'Inter var'
fontSize: '14px',
fontFamily: 'Inter var'
}
}
});
@ -179,8 +179,8 @@ export default {
key: t_key,
preset: preset,
config: {
font_size: '14px',
font_family: 'Inter var'
fontSize: '14px',
fontFamily: 'Inter var'
}
};
this.design;

View File

@ -188,8 +188,8 @@ export default {
};
usePreset(this.$appState.designer.theme.preset);
this.designerService.applyFont(this.$appState.designer.theme.config.font_family);
document.documentElement.style.fontSize = this.$appState.designer.theme.config.font_size;
this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
this.designerService.refreshACTokens();
this.$appState.designer.activeView = 'editor';
}

View File

@ -5,14 +5,14 @@
<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.font_size" @change="changeBaseFontSize" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-20">
<select v-model="$appState.designer.theme.config.fontSize" @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.font_family" @change="changeFont" class="appearance-none px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 w-48">
<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>
@ -77,16 +77,16 @@ export default {
missingTokens: [],
status: null,
fontSizes: ['12px', '13px', '14px', '15px', '16px'],
fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand']
fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Montserrat', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand']
};
},
methods: {
changeFont() {
this.designerService.applyFont(this.$appState.designer.theme.config.font_size);
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.font_family;
document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
this.designerService.saveTheme(this.$appState.designer.theme);
},
async preview() {
@ -95,9 +95,6 @@ export default {
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
},
body: {
license_key: this.$appState.designer.licenseKey
}
});
@ -131,9 +128,6 @@ export default {
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
},
body: {
license_key: this.$appState.designer.licenseKey
}
});