Skip to content

Commit 70f8d62

Browse files
maiieulmaiieul
authored
Merge pull request #631 from maiieul/custom-fonts
docs(make-it-yours): change font depending on style (WIP)
2 parents 498322e + ff75baf commit 70f8d62

File tree

12 files changed

+795
-380
lines changed

12 files changed

+795
-380
lines changed

‎apps/website/src/_state/make-it-yours.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BorderRadius, Color, Mode, ThemeStyle } from '@qwik-ui/utils';
1+
import { BorderRadius, Color, Mode, ThemeStyle, Font } from '@qwik-ui/utils';
22

33
export const baseOptions = [
44
Color.SLATE,
@@ -8,6 +8,15 @@ export const baseOptions = [
88
Color.STONE,
99
].map((color) => `base-${color}`);
1010

11+
export const fontOptions: Font[] = [
12+
Font.SANS,
13+
Font.SERIF,
14+
Font.MONO,
15+
Font.SOURCE_SERIF_PRO,
16+
Font.LONDRA_SHADOW,
17+
Font.RUBIK_DOODLE_SHADOW,
18+
];
19+
1120
export const styleOptions: ThemeStyle[] = [
1221
ThemeStyle.SIMPLE,
1322
ThemeStyle.BRUTALIST,

‎apps/website/src/components/make-it-yours/make-it-yours.tsx

Lines changed: 390 additions & 352 deletions
Large diffs are not rendered by default.

‎apps/website/src/global.css

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -375,11 +375,13 @@
375375
--ring: 24 5.7% 82.9%;
376376
}
377377

378-
.primary-slate-100 {
378+
.primary-slate-100,
379+
.dark.primary-slate-900 {
379380
--primary: 210 40% 96.1%;
380381
--primary-foreground: 0 0% 0%;
381382
}
382-
.primary-slate-200 {
383+
.primary-slate-200,
384+
.dark.primary-slate-800 {
383385
--primary: 214.3 31.8% 91.4%;
384386
--primary-foreground: 0 0% 0%;
385387
}
@@ -412,11 +414,13 @@
412414
--primary-foreground: 0 0% 100%;
413415
}
414416

415-
.primary-gray-100 {
417+
.primary-gray-100,
418+
.dark.primary-gray-900 {
416419
--primary: 220 14.3% 95.9%;
417420
--primary-foreground: 0 0% 0%;
418421
}
419-
.primary-gray-200 {
422+
.primary-gray-200,
423+
.dark.primary-gray-800 {
420424
--primary: 220 13% 91%;
421425
--primary-foreground: 0 0% 0%;
422426
}
@@ -449,11 +453,13 @@
449453
--primary-foreground: 0 0% 100%;
450454
}
451455

452-
.primary-zinc-100 {
456+
.primary-zinc-100,
457+
.dark.primary-zinc-900 {
453458
--primary: 240 4.8% 95.9%;
454459
--primary-foreground: 0 0% 0%;
455460
}
456-
.primary-zinc-200 {
461+
.primary-zinc-200,
462+
.dark.primary-zinc-800 {
457463
--primary: 240 5.9% 90%;
458464
--primary-foreground: 0 0% 0%;
459465
}
@@ -486,11 +492,13 @@
486492
--primary-foreground: 0 0% 100%;
487493
}
488494

489-
.primary-neutral-100 {
495+
.primary-neutral-100,
496+
.dark.primary-neutral-900 {
490497
--primary: 0 0% 96.1%;
491498
--primary-foreground: 0 0% 0%;
492499
}
493-
.primary-neutral-200 {
500+
.primary-neutral-200,
501+
.dark.primary-neutral-800 {
494502
--primary: 0 0% 89.8%;
495503
--primary-foreground: 0 0% 0%;
496504
}
@@ -523,11 +531,13 @@
523531
--primary-foreground: 0 0% 100%;
524532
}
525533

526-
.primary-stone-100 {
534+
.primary-stone-100,
535+
.dark.primary-stone-900 {
527536
--primary: 60 4.8% 95.9%;
528537
--primary-foreground: 0 0% 0%;
529538
}
530-
.primary-stone-200 {
539+
.primary-stone-200,
540+
.dark.primary-stone-800 {
531541
--primary: 20 5.9% 90%;
532542
--primary-foreground: 0 0% 0%;
533543
}
@@ -1307,7 +1317,6 @@ html {
13071317

13081318
body {
13091319
min-height: 100%;
1310-
font-family: 'Inter Variable', sans-serif;
13111320
}
13121321

13131322
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.

‎apps/website/src/root.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,15 @@ import {
1717
modeOptions,
1818
primaryOptions,
1919
styleOptions,
20+
fontOptions,
2021
} from './_state/make-it-yours';
2122

23+
import '@fontsource-variable/inter';
24+
import '@fontsource/ibm-plex-mono';
25+
import '@fontsource/source-serif-pro';
26+
import '@fontsource/londrina-shadow';
27+
import '@fontsource/rubik-doodle-shadow';
28+
2229
export default component$(() => {
2330
/**
2431
* The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -50,6 +57,7 @@ export default component$(() => {
5057
attribute="class"
5158
themes={[
5259
...modeOptions,
60+
...fontOptions,
5361
...styleOptions,
5462
...baseOptions,
5563
...primaryOptions,

‎apps/website/src/routes/layout.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import docsStyles from './docs.css?inline';
1313
import { useSelectedKit } from './docs/use-selected-kit';
1414
import prismStyles from './prism.css?inline';
1515

16-
import '@fontsource-variable/inter';
1716
import { MDXProvider } from '~/_state/MDXProvider';
1817
import { components } from '~/components/mdx-components';
1918
import { DashboardTableOfContents } from '~/components/toc/toc';

‎apps/website/tailwind.config.cjs

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ module.exports = {
1313
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
1414
join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
1515
],
16-
1716
plugins: [
1817
require('tailwindcss-animate'),
1918
// PLUGIN-START
@@ -32,13 +31,25 @@ module.exports = {
3231
}),
3332
// PLUGIN-END
3433
],
35-
3634
darkMode: 'class',
35+
safelist: [
36+
'font-sans',
37+
'font-serif',
38+
'font-mono',
39+
'font-source-serif-pro',
40+
'font-ibm-plex-mono',
41+
'font-londrina-shadow',
42+
'font-rubik-doodle-shadow',
43+
],
3744
theme: {
3845
important: true,
3946
extend: {
4047
fontFamily: {
4148
sans: ['Inter Variable', 'sans-serif'],
49+
'source-serif-pro': ['Source Serif Pro', 'serif'],
50+
'ibm-plex-mono': ['IBM Plex Mono', 'monospace'],
51+
'londrina-shadow': ['Londrina Shadow', 'cursive'],
52+
'rubik-doodle-shadow': ['Rubik Doodle Shadow', 'monospace'],
4253
},
4354
// EXTEND-START
4455
colors: {

‎package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,45 @@
5050
"@floating-ui/core": "1.4.1",
5151
"@floating-ui/dom": "^1.5.1",
5252
"@fontsource-variable/inter": "5.0.8",
53+
"@fontsource/audiowide": "5.0.18",
54+
"@fontsource/blackout-midnight": "5.0.7",
55+
"@fontsource/blackout-two-am": "5.0.7",
56+
"@fontsource/bungee-inline": "5.0.18",
57+
"@fontsource/bungee-shade": "5.0.18",
58+
"@fontsource/cinzel-decorative": "5.0.18",
59+
"@fontsource/codystar": "5.0.18",
60+
"@fontsource/creepster": "5.0.8",
61+
"@fontsource/eater": "5.0.18",
62+
"@fontsource/flow-block": "5.0.18",
63+
"@fontsource/flow-circular": "5.0.18",
64+
"@fontsource/hachi-maru-pop": "5.0.17",
65+
"@fontsource/ibm-plex-mono": "5.0.8",
66+
"@fontsource/indie-flower": "5.0.18",
67+
"@fontsource/libre-barcode-39": "5.0.18",
68+
"@fontsource/linefont": "5.0.7",
69+
"@fontsource/londrina-shadow": "5.0.18",
70+
"@fontsource/major-mono-display": "5.0.18",
71+
"@fontsource/megrim": "5.0.8",
72+
"@fontsource/monofett": "5.0.18",
73+
"@fontsource/nosifer": "5.0.18",
74+
"@fontsource/noto-color-emoji": "5.0.23",
75+
"@fontsource/orbitron": "5.0.18",
76+
"@fontsource/pixelify-sans": "5.0.1",
77+
"@fontsource/playpen-sans": "5.0.2",
78+
"@fontsource/press-start-2p": "5.0.18",
79+
"@fontsource/rampart-one": "5.0.17",
80+
"@fontsource/redacted": "5.0.18",
81+
"@fontsource/redacted-script": "5.0.18",
82+
"@fontsource/roboto": "5.0.8",
83+
"@fontsource/rubik-doodle-shadow": "5.0.1",
84+
"@fontsource/shadows-into-light": "5.0.18",
85+
"@fontsource/shantell-sans": "5.0.18",
86+
"@fontsource/silkscreen": "5.0.18",
87+
"@fontsource/slackey": "5.0.18",
88+
"@fontsource/source-serif-pro": "5.0.8",
89+
"@fontsource/tourney": "5.0.18",
90+
"@fontsource/vt323": "5.0.8",
91+
"@fontsource/wavefont": "5.0.11",
5392
"@img/sharp-linux-x64": "^0.33.0",
5493
"@jscutlery/semver": "^4.2.0",
5594
"@k11r/nx-cloudflare-wrangler": "2.7.1",

‎packages/kit-styled/src/templates/global.css

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -375,11 +375,13 @@
375375
--ring: 24 5.7% 82.9%;
376376
}
377377

378-
.primary-slate-100 {
378+
.primary-slate-100,
379+
.dark.primary-slate-900 {
379380
--primary: 210 40% 96.1%;
380381
--primary-foreground: 0 0% 0%;
381382
}
382-
.primary-slate-200 {
383+
.primary-slate-200,
384+
.dark.primary-slate-800 {
383385
--primary: 214.3 31.8% 91.4%;
384386
--primary-foreground: 0 0% 0%;
385387
}
@@ -412,11 +414,13 @@
412414
--primary-foreground: 0 0% 100%;
413415
}
414416

415-
.primary-gray-100 {
417+
.primary-gray-100,
418+
.dark.primary-gray-900 {
416419
--primary: 220 14.3% 95.9%;
417420
--primary-foreground: 0 0% 0%;
418421
}
419-
.primary-gray-200 {
422+
.primary-gray-200,
423+
.dark.primary-gray-800 {
420424
--primary: 220 13% 91%;
421425
--primary-foreground: 0 0% 0%;
422426
}
@@ -449,11 +453,13 @@
449453
--primary-foreground: 0 0% 100%;
450454
}
451455

452-
.primary-zinc-100 {
456+
.primary-zinc-100,
457+
.dark.primary-zinc-900 {
453458
--primary: 240 4.8% 95.9%;
454459
--primary-foreground: 0 0% 0%;
455460
}
456-
.primary-zinc-200 {
461+
.primary-zinc-200,
462+
.dark.primary-zinc-800 {
457463
--primary: 240 5.9% 90%;
458464
--primary-foreground: 0 0% 0%;
459465
}
@@ -486,11 +492,13 @@
486492
--primary-foreground: 0 0% 100%;
487493
}
488494

489-
.primary-neutral-100 {
495+
.primary-neutral-100,
496+
.dark.primary-neutral-900 {
490497
--primary: 0 0% 96.1%;
491498
--primary-foreground: 0 0% 0%;
492499
}
493-
.primary-neutral-200 {
500+
.primary-neutral-200,
501+
.dark.primary-neutral-800 {
494502
--primary: 0 0% 89.8%;
495503
--primary-foreground: 0 0% 0%;
496504
}
@@ -523,11 +531,13 @@
523531
--primary-foreground: 0 0% 100%;
524532
}
525533

526-
.primary-stone-100 {
534+
.primary-stone-100,
535+
.dark.primary-stone-900 {
527536
--primary: 60 4.8% 95.9%;
528537
--primary-foreground: 0 0% 0%;
529538
}
530-
.primary-stone-200 {
539+
.primary-stone-200,
540+
.dark.primary-stone-800 {
531541
--primary: 20 5.9% 90%;
532542
--primary-foreground: 0 0% 0%;
533543
}
@@ -1307,7 +1317,6 @@ html {
13071317

13081318
body {
13091319
min-height: 100%;
1310-
font-family: 'Inter Variable', sans-serif;
13111320
}
13121321

13131322
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.

‎packages/kit-styled/src/templates/tailwind.config.cjs

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ module.exports = {
1313
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
1414
join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
1515
],
16-
1716
plugins: [
1817
require('tailwindcss-animate'),
1918
// PLUGIN-START
@@ -32,13 +31,25 @@ module.exports = {
3231
}),
3332
// PLUGIN-END
3433
],
35-
3634
darkMode: 'class',
35+
safelist: [
36+
'font-sans',
37+
'font-serif',
38+
'font-mono',
39+
'font-source-serif-pro',
40+
'font-ibm-plex-mono',
41+
'font-londrina-shadow',
42+
'font-rubik-doodle-shadow',
43+
],
3744
theme: {
3845
important: true,
3946
extend: {
4047
fontFamily: {
4148
sans: ['Inter Variable', 'sans-serif'],
49+
'source-serif-pro': ['Source Serif Pro', 'serif'],
50+
'ibm-plex-mono': ['IBM Plex Mono', 'monospace'],
51+
'londrina-shadow': ['Londrina Shadow', 'cursive'],
52+
'rubik-doodle-shadow': ['Rubik Doodle Shadow', 'monospace'],
4253
},
4354
// EXTEND-START
4455
colors: {

‎packages/utils/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export * from './theme/border-radius.type';
44
export * from './theme/color.enum';
55
export * from './theme/extract-between-comments';
66
export * from './theme/extract-theme-css';
7+
export * from './theme/font.enum';
78
export * from './theme/mode.enum';
89
export * from './theme/theme-config.type';
910
export * from './theme/theme-style.enum';

0 commit comments

Comments
 (0)