Skip to content

Commit e895a61

Browse files
thejacksheltonthejackshelton
committed
feat(docs): updating a lot more docs examples
1 parent b0005ff commit e895a61

File tree

23 files changed

+866
-389
lines changed

23 files changed

+866
-389
lines changed

‎apps/website/src/_state/component-statuses.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const statusByComponent: ComponentKitsStatuses = {
4141
headless: {
4242
Accordion: ComponentStatus.Beta,
4343
Carousel: ComponentStatus.Planned,
44-
Combobox: ComponentStatus.Draft,
44+
Combobox: ComponentStatus.Beta,
4545
Popover: ComponentStatus.Draft,
4646
Select: ComponentStatus.Draft,
4747
Separator: ComponentStatus.Beta,

‎apps/website/src/global.css‎

Lines changed: 2 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -50,36 +50,6 @@
5050
--qwikui-slate-900: #0f172a;
5151
--qwikui-slate-950: #020617;
5252

53-
@font-face {
54-
font-family: 'Poppins';
55-
font-style: normal;
56-
font-weight: 400;
57-
font-display: fallback;
58-
src: url('/fonts/poppins-400.woff2') format('woff2');
59-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
60-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
61-
}
62-
63-
@font-face {
64-
font-family: 'Poppins';
65-
font-style: normal;
66-
font-weight: 500;
67-
font-display: fallback;
68-
src: url('/fonts/poppins-500.woff2') format('woff2');
69-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
70-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
71-
}
72-
73-
@font-face {
74-
font-family: 'Poppins';
75-
font-style: normal;
76-
font-weight: 700;
77-
font-display: fallback;
78-
src: url('/fonts/poppins-700.woff2') format('woff2');
79-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
80-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
81-
}
82-
8353
/* light themed shadows */
8454
--light-shadow-color: 0deg 0% 63%;
8555
--light-shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.34),
@@ -136,14 +106,11 @@ html {
136106

137107
background-color: var(--color-bg) !important;
138108
color: var(--color-text) !important;
139-
140-
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
141-
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
142-
'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
143109
}
144110

145111
body {
146112
min-height: 100%;
113+
font-family: 'Inter Variable', sans-serif;
147114
}
148115

149116
h1,
@@ -159,7 +126,7 @@ h6 {
159126
p,
160127
ul,
161128
ol {
162-
line-height: 1.45;
129+
line-height: 1.75;
163130
}
164131

165132
.layout {

‎apps/website/src/routes/_components/router-head/router-head.tsx‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,6 @@ export const RouterHead = component$(() => {
1919

2020
<link rel="preconnect" href="https://fonts.googleapis.com" />
2121
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
22-
<link
23-
rel="preload"
24-
href="/fonts/poppins-400.woff2"
25-
as="font"
26-
type="font/woff2"
27-
crossOrigin="anonymous"
28-
/>
29-
<link
30-
rel="preload"
31-
href="/fonts/poppins-500.woff2"
32-
as="font"
33-
type="font/woff2"
34-
crossOrigin="anonymous"
35-
/>
36-
<link
37-
rel="preload"
38-
href="/fonts/poppins-700.woff2"
39-
as="font"
40-
type="font/woff2"
41-
crossOrigin="anonymous"
42-
/>
4322

4423
<meta property="og:site_name" content="Qwik" />
4524
<meta name="twitter:site" content="@QwikDev" />

‎apps/website/src/routes/docs.css‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,35 @@
1010
*/
1111
& > {
1212
p {
13-
@apply mb-4;
13+
@apply mb-6;
1414
}
1515

1616
h1 {
17-
@apply text-3xl md:text-5xl md:mb-12 font-[800] tracking-wide;
17+
@apply text-3xl md:text-5xl md:mb-12 font-extrabold tracking-wide;
1818
}
1919

2020
h2 {
21-
@apply text-3xl font-bold mt-20 mb-12 border-b-2;
21+
@apply text-2xl font-extrabold mt-20 mb-8 border-b-[1px] border-slate-300 dark:border-slate-700 pb-2;
2222
}
2323

2424
h3 {
25-
@apply text-xl font-bold mt-4 mb-6;
25+
@apply text-xl font-semibold mt-8 mb-6;
2626
}
2727

2828
h4 {
29-
@apply text-lg mt-4 mb-6;
29+
@apply text-lg font-medium mt-6 mb-4 font-bold;
3030
}
3131

3232
h5 {
33-
@apply text-xl mb-1 font-bold;
33+
@apply text-base font-[700];
3434
}
3535

3636
blockquote {
37-
@apply bg-qwikui-blue-800 text-white shadow-light-medium dark:shadow-dark-medium dark:bg-qwikui-purple-800 p-4 lg:p-6 dark:border-[#F3F3F3] border-[#333333] rounded-xl my-4;
37+
@apply bg-qwikui-blue-800 text-white shadow-light-medium dark:shadow-dark-medium dark:bg-qwikui-purple-800 p-4 lg:p-6 rounded-xl my-4 border-[2px] border-qwikui-blue-200 dark:border-qwikui-purple-200;
3838
}
3939

4040
ul {
41-
@apply list-disc px-6 mb-4 font-[500];
41+
@apply list-disc px-6 mb-4 font-medium;
4242
}
4343

4444
li {
@@ -47,11 +47,11 @@
4747
}
4848

4949
a {
50-
@apply border-b-[1.5px] border-qwikui-blue-500 dark:border-qwikui-purple-400 transition transition-colors duration-300 ease-step hover:border-qwikui-blue-600 font-bold;
50+
@apply border-b-[1.5px] border-qwikui-blue-500 dark:border-qwikui-purple-400 transition transition-colors duration-300 ease-step hover:border-qwikui-blue-600 font-semibold;
5151
}
5252

5353
p code {
54-
@apply bg-white text-gray-950 shadow-dark-low dark:shadow-dark-low px-2 py-[2px] mx-1 rounded-md font-[600] border-[1px] dark:border-white w-max border-[#333333];
54+
@apply bg-white text-slate-800 shadow-dark-low dark:shadow-dark-low px-2 py-[2px] mx-1 rounded-md font-medium border-[1px] dark:border-white w-max border-[#333333] border-b-[2px] border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500;
5555
}
5656

5757
/* adds sufficient padding to the table items / API Component */
@@ -66,4 +66,8 @@
6666
blockquote a {
6767
@apply border-qwikui-blue-200 hover:border-qwikui-blue-100 dark:border-qwikui-purple-100 dark:hover:border-qwikui-purple-200;
6868
}
69+
70+
ol li {
71+
@apply my-4;
72+
}
6973
}

‎apps/website/src/routes/docs/_components/anatomy-table/anatomy-table.tsx‎

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

54
type AnatomyTableProps = {
@@ -12,14 +11,14 @@ type AnatomyTableProps = {
1211

1312
export const AnatomyTable = component$(({ propDescriptors }: AnatomyTableProps) => {
1413
return (
15-
<div class="overflow-auto">
16-
<table class="w-full max-w-full border-b border-gray-700 text-left">
17-
<tbody class="divide-y divide-gray-700">
18-
<tr class="text-white">
19-
<td class="whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
14+
<div class="overflow-auto rounded-xl">
15+
<table class="w-full max-w-full text-left">
16+
<tbody class="divide-y divide-slate-300 dark:divide-slate-600">
17+
<tr class="text-slate-950 dark:text-white">
18+
<td class="whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0 font-[700]">
2019
Component
2120
</td>
22-
<td class="whitespace-nowrap py-2 text-sm font-medium">Description</td>
21+
<td class="whitespace-nowrap py-2 text-sm font-[600]">Description</td>
2322
</tr>
2423
{propDescriptors?.map((propDescriptor) => {
2524
return (

‎apps/website/src/routes/docs/_components/api-table/api-table.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,32 +12,36 @@ type APITableProps = {
1212
export const APITable = component$(({ propDescriptors }: APITableProps) => {
1313
return (
1414
<div class="overflow-auto">
15-
<table class="w-full min-w-[540px] border-b border-slate-700 text-left sm:min-w-full mb-6">
16-
<tbody class="divide-y divide-slate-700">
15+
<table class="w-full min-w-[540px] border-b border-slate-300 dark:border-slate-600 text-left sm:min-w-full mb-6">
16+
<tbody class="divide-y divide-slate-300 dark:divide-slate-600">
1717
<tr class="w-1/4 dark:text-white ">
18-
<td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
18+
<td class="w-1/6 whitespace-nowrap py-2 pl-4 text-base font-medium sm:pl-0 text-slate-700 dark:text-slate-300 font-[600]">
1919
Prop
2020
</td>
21-
<td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium ">Type</td>
22-
<td class="w-2/3 whitespace-nowrap p-2 text-sm font-medium ">Description</td>
21+
<td class="w-1/6 whitespace-nowrap py-2 text-base text-slate-700 dark:text-slate-300 font-[600]">
22+
Type
23+
</td>
24+
<td class="w-2/3 whitespace-nowrap p-2 text-base text-slate-700 dark:text-slate-300 font-[600]">
25+
Description
26+
</td>
2327
</tr>
2428
{propDescriptors?.map((propDescriptor) => {
2529
return (
2630
<tr key={propDescriptor.name}>
2731
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
28-
<code class="bg-qwikui-blue-100 dark:bg-qwikui-purple-800 rounded-md mr-6">
32+
<code class="border-[1px] border-b-[2px] border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 text-slate-950 rounded-md mr-6 font-[400]">
2933
{propDescriptor.name}
3034
</code>
3135
</td>
3236
<td class="py-3 align-baseline">
3337
<span class="flex items-center">
34-
<code class="bg-slate-300 dark:bg-slate-700 rounded-md px-2">
38+
<code class="bg-slate-100 border-[1px] border-b-2 border-slate-700 dark:border-slate-400 dark:bg-slate-700 rounded-md px-2">
3539
{propDescriptor.type}
3640
</code>
3741
{propDescriptor.info && (
3842
<Popover placement="top">
3943
<PopoverContent>
40-
<div class="shadow-light-medium bg-qwikui-blue-100 text-slate-950 dark:text-white dark:bg-qwikui-purple-800 dark:shadow-dark-medium max-w-xs mb-2 text-md px-4 py-2 rounded-md sm:w-max">
44+
<div class="shadow-light-high bg-qwikui-blue-50 text-slate-950 dark:shadow-dark-high max-w-xs mb-2 text-md py-2 px-3 rounded-lg sm:w-max border-[1px] border-b-2 border-qwikui-blue-500 dark:border-qwikui-purple-500 dark:bg-qwikui-purple-100 font-[500]">
4145
{propDescriptor?.info}
4246
</div>
4347
</PopoverContent>

‎apps/website/src/routes/docs/_components/code-example/code-example.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { component$, Slot } from '@builder.io/qwik';
22

33
export const CodeExample = component$((props: { classes?: string }) => {
44
return (
5-
<div class={`p-12 mb-6 rounded-xl bg-slate-900 ${props.classes}`}>
5+
<div
6+
class={`p-12 mb-6 rounded-xl bg-slate-800 dark:bg-slate-900 shadow-light-low dark:shadow-dark-low border-slate-500 dark:border-slate-400 border-2 ${props.classes}`}
7+
>
68
<section class="overflow-x-auto">
79
<Slot />
810
</section>

‎apps/website/src/routes/docs/_components/keyboard-interaction-table/keyboard-interaction-table.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ export const KeyboardInteractionTable = component$(
1414
return (
1515
<table class="mb-6">
1616
<thead>
17-
<tr class="border-b-2">
18-
<th class="text-left font-400 text-md text-slate-800 dark:text-slate-400">
17+
<tr>
18+
<th class="text-left font-400 text-base text-slate-700 dark:text-slate-300">
1919
Key
2020
</th>
2121
<th class="text-left">
22-
<p class="ml-6 font-400 text-md text-slate-800 dark:text-slate-400">
22+
<p class="ml-6 font-400 text-base text-slate-700 dark:text-slate-300">
2323
Description
2424
</p>
2525
</th>
@@ -44,14 +44,14 @@ export const KeyboardInteractionTable = component$(
4444
export const KBInteractionTableRow = component$(
4545
({ keyTitle, description }: KBInteractionTableRowProps) => {
4646
return (
47-
<tr class="border-b-2 border-gray-700">
47+
<tr class="border-b-[1px] border-slate-300 dark:border-slate-600">
4848
<td class="py-4">
49-
<kbd class="border w-max shadow-lg rounded-md px-2 capitalize text-sm inline-block">
49+
<kbd class="border w-max shadow-light-medium dark:shadow-dark-medium rounded-md px-2 capitalize text-base inline-block border-b-[2px] border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 text-slate-700 dark:text-slate-950 dark:border-qwikui-purple-400 font-[600]">
5050
{keyTitle}
5151
</kbd>
5252
</td>
5353
<td>
54-
<article class="ml-6">{description}</article>
54+
<article class="ml-6 text-base">{description}</article>
5555
</td>
5656
</tr>
5757
);

‎apps/website/src/routes/docs/_components/preview-code-example/preview-code-example.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ export const PreviewCodeExample = component$(({ ...props }) => {
2727
Code
2828
</Tab>
2929
</TabList>
30-
<TabPanel class="rounded-b-xl shadow-light-medium bg-slate-800 dark:shadow-dark-medium border-qwikui-blue-300 border-[1.5px] p-4 dark:border-qwikui-purple-200 md:p-12 bg-slate-200 dark:bg-slate-950">
30+
<TabPanel class="rounded-b-xl shadow-light-medium bg-slate-800 dark:shadow-dark-medium border-qwikui-blue-300 border-[1.5px] p-4 dark:border-qwikui-purple-200 md:p-12 bg-slate-200 dark:bg-slate-900">
3131
<section class="flex flex-col items-center">
3232
<Slot name="actualComponent" />
3333
</section>
3434
</TabPanel>
35-
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-900 border-[1.5px] border-qwikui-blue-300 dark:border-qwikui-purple-200">
35+
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-800 dark:bg-slate-900 border-[1.5px] border-qwikui-blue-300 dark:border-qwikui-purple-200">
3636
<section class="overflow-auto">
3737
<Slot name="codeExample" />
3838
</section>

‎apps/website/src/routes/docs/_components/status-banner/status-banner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export const StatusBanner = component$((props: StatusBannerProps) => {
111111
hidden={isBannerClosedSig.value}
112112
onAnimationEnd$={() => (isBannerClosedSig.value = true)}
113113
class={`${getBackgroundByStatus(props.status)} px-6 py-4 text-white
114-
rounded-xl md:items-center relative md:flex-row normal-state shadow-light-medium dark:shadow-dark-medium`}
114+
rounded-xl md:items-center relative md:flex-row normal-state shadow-light-medium dark:shadow-dark-medium border-[1px] border-qwikui-blue-200 dark:border-qwikui-purple-200`}
115115
style={{ marginBottom: `${marginBottom}px` }}
116116
>
117117
<span class="pr-2">{getMessageByStatus(props.status)}</span>

0 commit comments

Comments
 (0)