Skip to content

Commit df048ea

Browse files
eldomaganeldomagan
committed
feat: add font weight and style support for typography presets based on selected font
1 parent a50495f commit df048ea

File tree

17 files changed

+289
-69
lines changed

17 files changed

+289
-69
lines changed

‎docs/core-concepts/settings/types.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -987,6 +987,7 @@ return [
987987
->presets([
988988
'heading' => [
989989
'fontFamily' => 'Inter',
990+
'fontWeight' => '700',
990991
'fontSize' => '2xl',
991992
'lineHeight' => 'tight',
992993
'fontStyle' => 'normal',
@@ -995,6 +996,7 @@ return [
995996
],
996997
'body' => [
997998
'fontFamily' => 'Inter',
999+
'fontWeight' => '400',
9981000
'fontSize' => 'base',
9991001
'lineHeight' => 'normal',
10001002
'fontStyle' => 'normal',
@@ -1035,6 +1037,7 @@ This generates CSS for typography styles:
10351037
[data-typography='heading'] {
10361038
--typography-font-family: 'Inter', sans-serif;
10371039
--typography-font-style: normal;
1040+
--typography-font-weight: 700;
10381041
--typography-font-size: 1.5rem;
10391042
--typography-line-height: 1.25;
10401043
--typography-letter-spacing: 0em;
@@ -1044,6 +1047,7 @@ This generates CSS for typography styles:
10441047
[data-typography='body'] {
10451048
--typography-font-family: 'Inter', sans-serif;
10461049
--typography-font-style: normal;
1050+
--typography-font-weight: 400;
10471051
--typography-font-size: 1rem;
10481052
--typography-line-height: 1.5;
10491053
--typography-letter-spacing: 0em;
@@ -1079,6 +1083,7 @@ h2,
10791083
h3 {
10801084
--typography-font-family: 'Inter', sans-serif;
10811085
--typography-font-style: normal;
1086+
--typography-font-weight: 700;
10821087
--typography-font-size: 1.5rem;
10831088
--typography-line-height: 1.25;
10841089
--typography-letter-spacing: 0em;
@@ -1091,6 +1096,7 @@ li,
10911096
td {
10921097
--typography-font-family: 'Inter', sans-serif;
10931098
--typography-font-style: normal;
1099+
--typography-font-weight: 400;
10941100
--typography-font-size: 1rem;
10951101
--typography-line-height: 1.5;
10961102
--typography-letter-spacing: 0em;
@@ -1106,6 +1112,7 @@ In your theme's CSS, apply the generated CSS variables to elements:
11061112
[data-typography] {
11071113
font-family: var(--typography-font-family);
11081114
font-style: var(--typography-font-style);
1115+
font-weight: var(--typography-font-weight);
11091116
font-size: var(--typography-font-size);
11101117
line-height: var(--typography-line-height);
11111118
letter-spacing: var(--typography-letter-spacing);
@@ -1120,6 +1127,7 @@ Each preset is an array with the following properties:
11201127
| Property | Type | Description | Required | Values |
11211128
| --------------- | ------------- | -------------------------------------- | -------- | -------------------------------------------------------------------------------------- |
11221129
| `fontFamily` | string\|null | Font family name | No | Any font family name |
1130+
| `fontWeight` | string | Font weight | Yes | `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
11231131
| `fontSize` | string\|array | Font size token or responsive config | Yes | `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, `8xl`, `9xl` |
11241132
| `lineHeight` | string\|array | Line height token or responsive config | Yes | `none`, `tight`, `snug`, `normal`, `relaxed`, `loose` |
11251133
| `fontStyle` | string | Font style | Yes | `normal`, `italic` |
@@ -1175,6 +1183,7 @@ TypographyPresets::make('typography_presets', 'Typography Presets')
11751183
->presets([
11761184
'responsive-heading' => [
11771185
'fontFamily' => 'Inter',
1186+
'fontWeight' => '700',
11781187
'fontSize' => [
11791188
'_default' => '2xl', // Default size
11801189
'mobile' => 'xl', // max-width: 639px

‎resources/assets/editor/__tests__/craftile/features/updatePersistence.test.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ describe('updatePersistence utilities', () => {
205205
block2: { id: 'block2', parentId: 'block1' },
206206
};
207207

208-
const result = determineBlocksToProcess(updatedBlocks, allBlocks);
208+
const result = determineBlocksToProcess(Object.keys(updatedBlocks), allBlocks);
209209

210210
expect(result).toEqual(['block1']);
211211
});
@@ -220,7 +220,7 @@ describe('updatePersistence utilities', () => {
220220
block3: { id: 'block3', parentId: null },
221221
};
222222

223-
const result = determineBlocksToProcess(updatedBlocks, allBlocks);
223+
const result = determineBlocksToProcess(Object.keys(updatedBlocks), allBlocks);
224224

225225
expect(result).toEqual(['block3']);
226226
});
@@ -234,7 +234,7 @@ describe('updatePersistence utilities', () => {
234234
block2: { id: 'block2', parentId: null },
235235
};
236236

237-
const result = determineBlocksToProcess(updatedBlocks, allBlocks);
237+
const result = determineBlocksToProcess(Object.keys(updatedBlocks), allBlocks);
238238

239239
expect(result).toEqual(['block2']);
240240
});
@@ -250,7 +250,7 @@ describe('updatePersistence utilities', () => {
250250
block3: { id: 'block3', parentId: null },
251251
};
252252

253-
const result = determineBlocksToProcess(updatedBlocks, allBlocks);
253+
const result = determineBlocksToProcess(Object.keys(updatedBlocks), allBlocks);
254254

255255
expect(result).toEqual(['block3']);
256256
});

‎resources/assets/editor/auto-imports.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ declare global {
135135
const useBreakpoints: typeof import('@vueuse/core').useBreakpoints
136136
const useBroadcastChannel: typeof import('@vueuse/core').useBroadcastChannel
137137
const useBrowserLocation: typeof import('@vueuse/core').useBrowserLocation
138+
const useBunnyFonts: typeof import('./composables/useBunnyFonts').useBunnyFonts
138139
const useCached: typeof import('@vueuse/core').useCached
139140
const useClipboard: typeof import('@vueuse/core').useClipboard
140141
const useClipboardItems: typeof import('@vueuse/core').useClipboardItems
@@ -444,6 +445,7 @@ declare module 'vue' {
444445
readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
445446
readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
446447
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
448+
readonly useBunnyFonts: UnwrapRef<typeof import('./composables/useBunnyFonts')['useBunnyFonts']>
447449
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
448450
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
449451
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>

‎resources/assets/editor/components/FontPicker.vue‎

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { Button } from '@craftile/editor/ui';
44
import { Dialog } from '@ark-ui/vue/dialog';
55
import { Field } from '@ark-ui/vue/field';
66
import useI18n from '../composables/i18n';
7+
import { useBunnyFonts } from '../composables/useBunnyFonts';
8+
import { toTitleCase } from '../utils/strings';
79
810
interface Font {
911
slug: string;
1012
name: string;
11-
weights: string[];
13+
weights: number[];
1214
styles: string[];
1315
}
1416
@@ -27,7 +29,12 @@ const model = defineModel({
2729
return v;
2830
}
2931
30-
return { slug: v, name: v.replace(/-/g, ' '), weights: [], styles: [] };
32+
return {
33+
slug: v,
34+
name: toTitleCase(v),
35+
weights: [],
36+
styles: []
37+
};
3138
},
3239
});
3340
@@ -37,33 +44,8 @@ const initialValue = ref<Font | null>(null);
3744
const isDirty = ref(false);
3845
const opened = ref(false);
3946
const search = ref('');
40-
const isFetching = ref(false);
41-
const fonts = ref<Font[]>([]);
42-
43-
const fetchFonts = async () => {
44-
isFetching.value = true;
45-
try {
46-
const response = await fetch('https://fonts.bunny.net/list');
47-
const data = await response.json();
48-
49-
const formatted: Font[] = [];
50-
Object.keys(data).forEach((key) => {
51-
formatted.push({
52-
slug: key,
53-
name: key.replace(/-/g, ' '),
54-
...(data as any)[key],
55-
});
56-
});
57-
58-
fonts.value = formatted;
59-
} catch (error) {
60-
console.error('Failed to fetch fonts:', error);
61-
} finally {
62-
isFetching.value = false;
63-
}
64-
};
6547
66-
onMounted(() => fetchFonts());
48+
const { fonts, isFetching } = useBunnyFonts();
6749
6850
const displayedFonts = computed(() => {
6951
if (!fonts.value) {

‎resources/assets/editor/components/ThemeSettingsPanel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,4 @@ const updateSetting = (id: string, value: any) => {
112112
</div>
113113
</div>
114114
</div>
115-
</template>
115+
</template>

0 commit comments

Comments
 (0)