Skip to content

Commit 0c7933d

Browse files
maiieulmaiieul
authored
Merge pull request #656 from maiieul/dynamic-fonts
Small docs fixes and improvements
2 parents 372ad1f + 0e70954 commit 0c7933d

File tree

121 files changed

+1036
-1539
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+1036
-1539
lines changed

‎.github/actions/test/action.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ runs:
3333
- name: Test all except headless
3434
shell: bash
3535
run: npx nx run-many -t test # --base=last-release <- add that back
36+
env:
37+
NODE_OPTIONS: --experimental-vm-modules
3638

3739
- name: Test Headless
3840
uses: cypress-io/github-action@v5

‎.prettierrc

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@
33
"singleQuote": true,
44
"trailingComma": "all",
55
"printWidth": 90,
6-
"plugins": ["prettier-plugin-tailwindcss"]
6+
"plugins": ["prettier-plugin-tailwindcss"],
7+
"tailwindConfig": "./apps/website/tailwind.config.cjs",
8+
"tailwindFunctions": ["clsx", "cva", "cn"]
79
}

‎.vscode/settings.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"git.pullTags": false,
3-
"conventionalCommits.scopes": ["styled", "headless", "docs"],
3+
"conventionalCommits.scopes": ["styled", "headless", "docs"],
44
"tailwindCSS.experimental.classRegex": [
5-
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
5+
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
6+
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
67
],
78
"editor.codeActionsOnSave": {
89
"source.removeUnusedImports": "explicit"

‎apps/component-tests/src/global.css

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,8 @@
206206
--card-foreground: 222.2 47.4% 11.2%;
207207
--border: 214.3 31.8% 91.4%;
208208
--input: 214.3 31.8% 91.4%;
209-
--secondary: 214.3 31.8% 91.4%;
210-
--secondary-foreground: 0 0% 0%;
209+
--secondary: 222.2 47.4% 11.2%;
210+
--secondary-foreground: 0 0% 100%;
211211
--accent: 210 40% 96.1%;
212212
--accent-foreground: 222.2 47.4% 11.2%;
213213
--alert: 0 84.2% 60.2%;
@@ -225,7 +225,7 @@
225225
--card-foreground: 210 40% 98%;
226226
--border: 217.2 32.6% 17.5%;
227227
--input: 217.2 32.6% 17.5%;
228-
--secondary: 214.3 31.8% 91.4%;
228+
--secondary: 210 40% 96.1%;
229229
--secondary-foreground: 0 0% 0%;
230230
--accent: 217.2 32.6% 17.5%;
231231
--accent-foreground: 210 40% 98%;
@@ -245,8 +245,8 @@
245245
--card-foreground: 220.9 39.3% 11%;
246246
--border: 220 13% 91%;
247247
--input: 220 13% 91%;
248-
--secondary: 220 13% 91%;
249-
--secondary-foreground: 0 0% 0%;
248+
--secondary: 220.9 39.3% 11%;
249+
--secondary-foreground: 0 0% 100%;
250250
--accent: 220 14.3% 95.9%;
251251
--accent-foreground: 220.9 39.3% 11%;
252252
--alert: 0 84.2% 60.2%;
@@ -264,7 +264,7 @@
264264
--card-foreground: 210 20% 98%;
265265
--border: 215 27.9% 16.9%;
266266
--input: 215 27.9% 16.9%;
267-
--secondary: 220 13% 91%;
267+
--secondary: 220 14.3% 95.9%;
268268
--secondary-foreground: 0 0% 0%;
269269
--accent: 215 27.9% 16.9%;
270270
--accent-foreground: 210 20% 98%;
@@ -284,8 +284,8 @@
284284
--card-foreground: 240 5.9% 10%;
285285
--border: 240 5.9% 90%;
286286
--input: 240 5.9% 90%;
287-
--secondary: 240 5.9% 90%;
288-
--secondary-foreground: 0 0% 0%;
287+
--secondary: 240 5.9% 10%;
288+
--secondary-foreground: 0 0% 100%;
289289
--accent: 240 4.8% 95.9%;
290290
--accent-foreground: 240 5.9% 10%;
291291
--alert: 0 84.2% 60.2%;
@@ -303,7 +303,7 @@
303303
--card-foreground: 0 0% 98%;
304304
--border: 240 3.7% 15.9%;
305305
--input: 240 3.7% 15.9%;
306-
--secondary: 240 5.9% 90%;
306+
--secondary: 240 4.8% 95.9%;
307307
--secondary-foreground: 0 0% 0%;
308308
--accent: 240 3.7% 15.9%;
309309
--accent-foreground: 0 0% 98%;
@@ -323,8 +323,8 @@
323323
--card-foreground: 0 0% 9%;
324324
--border: 0 0% 89.8%;
325325
--input: 0 0% 89.8%;
326-
--secondary: 0 0% 89.8%;
327-
--secondary-foreground: 0 0% 0%;
326+
--secondary: 0 0% 9%;
327+
--secondary-foreground: 0 0% 100%;
328328
--accent: 0 0% 96.1%;
329329
--accent-foreground: 0 0% 9%;
330330
--alert: 0 84.2% 60.2%;
@@ -342,7 +342,7 @@
342342
--card-foreground: 0 0% 98%;
343343
--border: 0 0% 14.9%;
344344
--input: 0 0% 14.9%;
345-
--secondary: 0 0% 89.8%;
345+
--secondary: 0 0% 96.1%;
346346
--secondary-foreground: 0 0% 0%;
347347
--accent: 0 0% 14.9%;
348348
--accent-foreground: 0 0% 98%;
@@ -362,8 +362,8 @@
362362
--card-foreground: 24 9.8% 10%;
363363
--border: 20 5.9% 90%;
364364
--input: 20 5.9% 90%;
365-
--secondary: 20 5.9% 90%;
366-
--secondary-foreground: 0 0% 0%;
365+
--secondary: 24 9.8% 10%;
366+
--secondary-foreground: 0 0% 100%;
367367
--accent: 60 4.8% 95.9%;
368368
--accent-foreground: 24 9.8% 10%;
369369
--alert: 0 84.2% 60.2%;
@@ -381,7 +381,7 @@
381381
--card-foreground: 60 9.1% 97.8%;
382382
--border: 12 6.5% 15.1%;
383383
--input: 12 6.5% 15.1%;
384-
--secondary: 20 5.9% 90%;
384+
--secondary: 60 4.8% 95.9%;
385385
--secondary-foreground: 0 0% 0%;
386386
--accent: 12 6.5% 15.1%;
387387
--accent-foreground: 60 9.1% 97.8%;
@@ -1221,7 +1221,15 @@
12211221
@apply border-border;
12221222
}
12231223
body {
1224-
@apply bg-background text-foreground;
1224+
@apply bg-background font-sans text-foreground;
1225+
}
1226+
1227+
p code {
1228+
@apply rounded-sm border-b-2 bg-accent px-2 py-0.5;
1229+
}
1230+
1231+
pre code {
1232+
@apply whitespace-pre-wrap;
12251233
}
12261234

12271235
*::-webkit-scrollbar {

‎apps/component-tests/tailwind.config.cjs

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const plugin = require('tailwindcss/plugin');
66
module.exports = {
77
content: [
88
join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'),
9-
join(__dirname, '../../packages/kit-tailwind/src/**/*.{js,ts,jsx,tsx,mdx}'),
9+
join(__dirname, '../website/src/**/*.{js,ts,jsx,tsx,mdx}'),
1010
join(__dirname, '../../packages/kit-styled/src/**/*.{js,ts,jsx,tsx,mdx}'),
1111
],
1212
plugins: [
@@ -28,25 +28,9 @@ module.exports = {
2828
// PLUGIN-END
2929
],
3030
darkMode: 'class',
31-
safelist: [
32-
'font-sans',
33-
'font-serif',
34-
'font-mono',
35-
'font-source-serif-pro',
36-
'font-ibm-plex-mono',
37-
'font-londrina-shadow',
38-
'font-rubik-doodle-shadow',
39-
],
4031
theme: {
4132
important: true,
4233
extend: {
43-
fontFamily: {
44-
sans: ['Inter Variable', 'sans-serif'],
45-
'source-serif-pro': ['Source Serif Pro', 'serif'],
46-
'ibm-plex-mono': ['IBM Plex Mono', 'monospace'],
47-
'londrina-shadow': ['Londrina Shadow', 'cursive'],
48-
'rubik-doodle-shadow': ['Rubik Doodle Shadow', 'monospace'],
49-
},
5034
screens: {
5135
xs: '480px',
5236
},

‎apps/website/src/components/anatomy-table/anatomy-table.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { component$ } from '@builder.io/qwik';
2-
import {} from '@qwik-ui/headless';
32

43
type AnatomyTableProps = {
54
firstColumnLabel?: string;
@@ -13,14 +12,14 @@ type AnatomyTableProps = {
1312
export const AnatomyTable = component$(
1413
({ firstColumnLabel = 'Component', propDescriptors }: AnatomyTableProps) => {
1514
return (
16-
<div class="prose prose-sm overflow-auto">
15+
<div class="overflow-auto">
1716
<table class="mb-6 w-full min-w-[540px] text-left sm:min-w-full">
1817
<tbody class="divide-y">
1918
<tr class="text-foreground">
20-
<td class="w-2/6 whitespace-nowrap p-2 text-base font-semibold sm:pl-0">
19+
<td class="w-2/6 whitespace-nowrap p-2 font-semibold sm:pl-0">
2120
{firstColumnLabel}
2221
</td>
23-
<td class="w-4/6 whitespace-nowrap p-2 text-base font-semibold sm:pl-0">
22+
<td class="w-4/6 whitespace-nowrap p-2 font-semibold sm:pl-0">
2423
Description
2524
</td>
2625
</tr>
@@ -29,13 +28,13 @@ export const AnatomyTable = component$(
2928
<tr key={propDescriptor.name}>
3029
<td class="align-center py-3 pl-2 pr-2 sm:pl-0 md:align-baseline">
3130
<div class="flex items-center gap-2">
32-
<code class="border-primary text-accent-foreground mr-6 rounded-sm border border-b-2 px-2">
31+
<code class="mr-6 rounded-sm border border-b-2 border-primary px-2 text-accent-foreground">
3332
{propDescriptor.name}
3433
</code>
3534
</div>
3635
</td>
3736
<td class="py-3 align-baseline">
38-
<div class="prose-docs-table">
37+
<div class="">
3938
<p>{propDescriptor.description}</p>
4039
</div>
4140
</td>

‎apps/website/src/components/api-table/api-table.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,16 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
1515
<table class="mb-6 w-full min-w-[540px] border-b text-left sm:min-w-full">
1616
<tbody class="divide-y">
1717
<tr class="w-1/4">
18-
<th class="w-1/6 whitespace-nowrap py-2 pl-4 text-base font-semibold sm:pl-0">
19-
Prop
20-
</th>
21-
<th class="w-1/6 whitespace-nowrap py-2 text-base font-semibold">Type</th>
22-
<th class="w-2/3 whitespace-nowrap p-2 text-base font-semibold">
23-
Description
24-
</th>
18+
<th class="w-1/6 whitespace-nowrap py-2 pl-4 font-semibold sm:pl-0">Prop</th>
19+
<th class="w-1/6 whitespace-nowrap py-2 font-semibold">Type</th>
20+
<th class="w-2/3 whitespace-nowrap p-2 font-semibold">Description</th>
2521
</tr>
2622
{propDescriptors?.map((propDescriptor) => {
2723
return (
2824
<tr key={propDescriptor.name}>
2925
<td class="py-3 pl-4 sm:pl-0">
3026
<div class="flex items-center gap-2">
31-
<code class="border-primary rounded-base mr-6 border border-b-[2px] px-2">
27+
<code class="mr-6 rounded-base border border-b-2 border-primary px-2">
3228
{propDescriptor.name}
3329
</code>
3430
</div>
@@ -42,8 +38,8 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
4238
</div>
4339
</td>
4440
<td class="py-3 align-baseline">
45-
<div class="prose prose-sm prose-docs-table px-2">
46-
<p>{propDescriptor.description}</p>
41+
<div class="px-2">
42+
<p class="text-base">{propDescriptor.description}</p>
4743
</div>
4844
</td>
4945
</tr>

‎apps/website/src/components/code-copy/code-copy.tsx

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,34 @@ export type CodeCopyProps = PropsOf<typeof Button> & {
77
code?: string;
88
};
99

10-
export const CodeCopy = component$<CodeCopyProps>(
11-
({ code = '', class: outsideClass, ...props }) => {
12-
const copied = useSignal(false);
10+
export const CodeCopy = component$<CodeCopyProps>(({ code = '', ...props }) => {
11+
const copied = useSignal(false);
1312

14-
return (
15-
<Button
16-
{...props}
17-
look="ghost"
18-
title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
19-
class={cn(outsideClass)}
20-
onClick$={async () => {
21-
await copy(code);
22-
copied.value = true;
13+
return (
14+
<Button
15+
{...props}
16+
look="ghost"
17+
title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
18+
class={cn(props.class)}
19+
onClick$={async () => {
20+
await copy(code);
21+
copied.value = true;
2322

24-
setTimeout(() => {
25-
copied.value = false;
26-
}, 4000);
27-
}}
28-
>
29-
{!copied.value ? (
30-
<CopyIcon />
31-
) : (
32-
<div class="flex gap-1">
33-
<ClipboardCheck />
34-
</div>
35-
)}
36-
</Button>
37-
);
38-
},
39-
);
23+
setTimeout(() => {
24+
copied.value = false;
25+
}, 4000);
26+
}}
27+
>
28+
{!copied.value ? (
29+
<CopyIcon />
30+
) : (
31+
<div class="flex gap-1">
32+
<ClipboardCheck />
33+
</div>
34+
)}
35+
</Button>
36+
);
37+
});
4038

4139
export function CopyIcon(props: PropsOf<'svg'> & { color?: string }, key: string) {
4240
return (

‎apps/website/src/components/copy-css-config/copy-css-config.tsx

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { extractThemeCSS } from '@qwik-ui/utils';
55
import { LuX } from '@qwikest/icons/lucide';
66
import { useTheme } from 'qwik-themes';
77
import globalCSS from '~/global.css?raw';
8+
import { Highlight } from '../highlight/highlight';
89

910
export default component$(() => {
1011
const showSig = useSignal(false);
@@ -17,39 +18,32 @@ export default component$(() => {
1718
<>
1819
<Button
1920
onClick$={() => {
20-
showSig.value = true;
2121
cssThemeOutput.value = extractThemeCSS(
2222
theme === 'dark' || theme === 'light'
2323
? 'border-radius-0 simple primary-cyan-600 light base-slate'
2424
: theme,
2525
globalCSS,
2626
);
27+
showSig.value = true;
2728
}}
2829
>
2930
Copy code
3031
</Button>
3132
<Modal
3233
bind:show={showSig}
33-
class="my-animation bg-background text-foreground rounded-base h-full max-w-2xl overflow-x-hidden p-8 shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
34+
class="my-animation h-[650px] max-w-2xl overflow-x-hidden rounded-base bg-background p-8 text-foreground shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
3435
>
3536
<ModalHeader>
36-
<h2 class="text-lg font-bold">Copy config</h2>
37-
<p>
37+
<h2 class="mb-2 text-lg font-bold">Copy config</h2>
38+
<p class="mb-6">
3839
Copy and paste the following code into your global.css file to apply the
3940
styles.
4041
</p>
4142
</ModalHeader>
42-
<ModalContent class="mb-2 pb-4 pt-2">
43-
<div>
44-
<pre>
45-
<code>{cssThemeOutput.value}</code>
46-
</pre>
47-
</div>
43+
<ModalContent>
44+
<Highlight code={cssThemeOutput.value} language="css" class="border" />
4845
</ModalContent>
49-
<button
50-
onClick$={() => (showSig.value = false)}
51-
class="absolute right-6 top-[26px]"
52-
>
46+
<button onClick$={() => (showSig.value = false)} class="absolute right-6 top-7">
5347
<LuX class="h-8 w-8" />
5448
</button>
5549
</Modal>

‎apps/website/src/components/feature-list/feature-list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ type FeatureListProps = {
1111

1212
export const FeatureList = component$((props: FeatureListProps) => {
1313
return (
14-
<ul class="mb-12 mt-[-16px] !px-0">
14+
<ul class="mb-12 mt-6 !px-0">
1515
{props.features && (
1616
<>
1717
{props.features.map((descriptor) => {

0 commit comments

Comments
 (0)