Refactored font settings
parent
681af3955c
commit
e630a39d50
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue