Skip to content

Commit 2048395

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #419 from thejackshelton/feat-combobox
fix(cypress): tests fixes, docs improvements
2 parents a14c2e3 + 90688a4 commit 2048395

File tree

19 files changed

+223
-84
lines changed

19 files changed

+223
-84
lines changed

‎apps/website/src/global.css‎

Lines changed: 73 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '@fontsource-variable/inter';
2-
31
@tailwind components;
42
@tailwind base;
53
@tailwind utilities;
@@ -40,7 +38,8 @@
4038
}
4139

4240
.dark {
43-
--color-background: 263 84% 5%;
41+
/* previous 263 84% 5% */
42+
--color-background: 222 47% 11%;
4443
--color-foreground: 263 40% 98%;
4544

4645
--color-primary: 263 40% 98%;
@@ -224,4 +223,75 @@ ol {
224223
.accordion-animation-1[data-state='closed'] {
225224
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
226225
}
226+
227+
.text-outline-lg {
228+
text-shadow: 1.6px 0.6px 0 var(--qwikui-blue-800),
229+
-0.6px -0.6px 0 var(--qwikui-blue-800), 0.6px -0.6px 0 var(--qwikui-blue-800),
230+
-0.6px 0.6px 0 var(--qwikui-blue-800), 0.6px 0.6px 0 var(--qwikui-blue-800);
231+
}
232+
233+
.dark .text-outline-lg {
234+
text-shadow: 1.2px 1.2px 0 var(--qwikui-purple-900),
235+
-0.6px -0.6px 0 var(--qwikui-purple-900), 0.6px -0.6px 0 var(--qwikui-purple-900),
236+
-0.6px 0.6px 0 var(--qwikui-purple-900), 0.6px 0.6px 0 var(--qwikui-purple-900);
237+
}
238+
239+
.text-outline-beta {
240+
text-shadow: 1.5px 0.5px 0 var(--qwikui-blue-800),
241+
-0.5px -0.5px 0 var(--qwikui-blue-800), 0.5px -0.5px 0 var(--qwikui-blue-800),
242+
-0.5px 0.5px 0 var(--qwikui-blue-800), 0.5px 0.5px 0 var(--qwikui-blue-800);
243+
}
244+
245+
.dark .text-outline-beta {
246+
text-shadow: 1.5px 0.5px 0 var(--qwikui-purple-800),
247+
-0.5px -0.5px 0 var(--qwikui-purple-800), 0.5px -0.5px 0 var(--qwikui-purple-800),
248+
-0.5px 0.5px 0 var(--qwikui-purple-800), 0.5px 0.5px 0 var(--qwikui-purple-800);
249+
}
250+
251+
.text-outline-draft {
252+
text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-900),
253+
-0.5px -0.5px 0 var(--qwikui-slate-900), 0.5px -0.5px 0 var(--qwikui-slate-900),
254+
-0.5px 0.5px 0 var(--qwikui-slate-900), 0.5px 0.5px 0 var(--qwikui-slate-900);
255+
}
256+
.dark .text-outline-draft {
257+
text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-950),
258+
-0.5px -0.5px 0 var(--qwikui-slate-950), 0.5px -0.5px 0 var(--qwikui-slate-950),
259+
-0.5px 0.5px 0 var(--qwikui-slate-950), 0.5px 0.5px 0 var(--qwikui-slate-950);
260+
}
261+
262+
.text-outline-planned {
263+
text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-500),
264+
-0.5px -0.5px 0 var(--qwikui-slate-500), 0.5px -0.5px 0 var(--qwikui-slate-500),
265+
-0.5px 0.5px 0 var(--qwikui-slate-500), 0.5px 0.5px 0 var(--qwikui-slate-500);
266+
}
267+
268+
.dark .text-outline-planned {
269+
text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-500),
270+
-0.4px -0.4px 0 var(--qwikui-slate-500), 0.4px -0.4px 0 var(--qwikui-slate-500),
271+
-0.4px 0.4px 0 var(--qwikui-slate-500), 0.4px 0.4px 0 var(--qwikui-slate-500);
272+
}
273+
274+
.text-outline-blue-title {
275+
text-shadow: 1.2px 1.2px 0 var(--qwikui-blue-800),
276+
-0.6px -0.6px 0 var(--qwikui-blue-800), 0.6px -0.6px 0 var(--qwikui-blue-800),
277+
-0.6px 0.6px 0 var(--qwikui-blue-800), 0.6px 0.6px 0 var(--qwikui-blue-800);
278+
}
279+
280+
.text-outline-purple-title {
281+
text-shadow: 1.2px 1.2px 0 var(--qwikui-purple-900),
282+
-0.6px -0.6px 0 var(--qwikui-purple-900), 0.6px -0.6px 0 var(--qwikui-purple-900),
283+
-0.6px 0.6px 0 var(--qwikui-purple-900), 0.6px 0.6px 0 var(--qwikui-purple-900);
284+
}
285+
286+
.dark .text-outline-blue-title {
287+
text-shadow: 1.2px 1.2px 0 var(--qwikui-blue-700),
288+
-0.8px -0.8px 0 var(--qwikui-blue-700), 0.8px -0.8px 0 var(--qwikui-blue-700),
289+
-0.8px 0.8px 0 var(--qwikui-blue-700), 0.8px 0.8px 0 var(--qwikui-blue-700);
290+
}
291+
292+
.dark .text-outline-purple-title {
293+
text-shadow: 1.2px 1.2px 0 var(--qwikui-purple-700),
294+
-0.8px -0.8px 0 var(--qwikui-purple-700), 0.8px -0.8px 0 var(--qwikui-purple-700),
295+
-0.8px 0.8px 0 var(--qwikui-purple-700), 0.8px 0.8px 0 var(--qwikui-purple-700);
296+
}
227297
}

‎apps/website/src/routes/_components/footer/footer.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ import { DiscordIcon } from '../icons/discord';
44

55
export const Footer = component$(() => {
66
return (
7-
<footer class="bg-gray-300 dark:bg-gray-900">
7+
<footer class="border-t-[1px] border-slate-100 border-slate-300 bg-slate-50 dark:border-slate-800 dark:bg-slate-950">
88
<div class="mx-auto max-w-7xl overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
99
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
1010
<div class="px-5 py-2">
1111
<a
1212
href="/about"
13-
class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
13+
class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
1414
>
1515
About
1616
</a>
1717
</div>
1818
<div class="px-5 py-2">
1919
<a
2020
href="/docs/headless/introduction"
21-
class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
21+
class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
2222
>
2323
Headless Kit
2424
</a>
@@ -28,7 +28,7 @@ export const Footer = component$(() => {
2828
<a
2929
href="https://discord.gg/PVWUUejrez"
3030
target="_blank"
31-
class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
31+
class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
3232
>
3333
Community
3434
</a>
@@ -38,7 +38,7 @@ export const Footer = component$(() => {
3838
<a
3939
href="https://www.w3.org/standards/webdesign/accessibility"
4040
target="_blank"
41-
class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
41+
class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
4242
>
4343
Accessibility
4444
</a>
@@ -47,7 +47,7 @@ export const Footer = component$(() => {
4747
<a
4848
href="https://qwik.builder.io/docs"
4949
target="_blank"
50-
class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
50+
class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
5151
>
5252
Qwik Documentation
5353
</a>
@@ -58,20 +58,20 @@ export const Footer = component$(() => {
5858
target="_blank"
5959
href="https://github.com/qwikifiers/qwik-ui"
6060
aria-label="Qwik-UI GitHub repository"
61-
class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
61+
class="text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white"
6262
>
6363
<GitHubIcon />
6464
</a>
6565
<a
6666
target="_blank"
6767
href="https://discord.gg/PVWUUejrez"
6868
aria-label="Qwik-UI Discord server"
69-
class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
69+
class="text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white"
7070
>
7171
<DiscordIcon />
7272
</a>
7373
</div>
74-
<p class="mt-8 text-center text-base text-gray-600 dark:text-gray-400">
74+
<p class="mt-8 text-center text-base text-slate-600 dark:text-slate-400">
7575
&copy; 2023 Qwik UI. All rights reserved.
7676
</p>
7777
</div>

‎apps/website/src/routes/_components/header/header.tsx‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { MenuIcon } from '../icons/MenuIcon';
1212
import { MoonIcon } from '../icons/MoonIcon';
1313
import { SunIcon } from '../icons/SunIcon';
1414
import { Logo } from '../icons/logo';
15+
import { useLocation } from '@builder.io/qwik-city';
1516

1617
export interface HeaderProps {
1718
showVersion?: boolean;
@@ -22,6 +23,23 @@ export default component$(
2223
({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
2324
const rootStore = useRootStore();
2425
const selectedKitSig = useSelectedKit();
26+
const location = useLocation();
27+
28+
const isRouteActive = (href: string) => {
29+
const isLinkActive = location.url.pathname.startsWith(href);
30+
return `text-slate-600 dark:text-slate-400 hover:text-slate-950 focus:text-slate-950 dark:hover:text-white dark:focus:text-white
31+
transition-color ease-step duration-300 ${
32+
isLinkActive ? 'font-bold !text-slate-950 dark:!text-white' : ''
33+
}`;
34+
};
35+
36+
const isDocsActive = (baseHref: string) => {
37+
const isLinkActive = location.url.pathname.startsWith(baseHref);
38+
return `text-slate-600 dark:text-slate-400 hover:text-slate-950 focus:text-slate-950 dark:hover:text-white dark:focus:text-white
39+
transition-color ease-step duration-300 ${
40+
isLinkActive ? 'font-bold !text-slate-950 dark:!text-white' : ''
41+
}`;
42+
};
2543

2644
const kitSignal = useComputed$(() => {
2745
if (selectedKitSig.value === KitName.HEADLESS) {
@@ -46,12 +64,12 @@ export default component$(
4664
return (
4765
<header
4866
class={[
49-
`fixed top-0 z-20 flex h-20 w-full items-center gap-8 p-4 md:h-20 md:bg-[var(--color-bg)]`,
50-
`shadow-light-medium dark:shadow-dark-medium`,
67+
`fixed top-0 z-20 flex h-20 w-full items-center gap-8 border-b-[1px] border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
68+
`shadow-light-low dark:shadow-dark-medium`,
5169
rootStore.isSidebarOpened
5270
? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
5371
: 'bg-[var(--color-bg)]',
54-
showBottomBorder ? `shadow-light-medium dark:shadow-dark-medium` : ``,
72+
showBottomBorder ? `shadow-light-low dark:shadow-dark-medium` : ``,
5573
]}
5674
>
5775
<section class="mr-auto flex flex-col gap-1 md:flex-row md:gap-8">
@@ -70,12 +88,22 @@ export default component$(
7088
</section>
7189

7290
<nav class="hidden gap-4 lg:flex">
73-
<a href="/about">About</a>
74-
<a href="/docs/headless/introduction">Headless Kit</a>
91+
<a class={isRouteActive('/about')} href="/about">
92+
About
93+
</a>
94+
<a class={isDocsActive('/docs/headless/')} href="/docs/headless/introduction">
95+
Headless Kit
96+
</a>
7597
{rootStore.featureFlags?.showFluffy && (
76-
<a href="/docs/fluffy/introduction">Fluffy (styled) Kit</a>
98+
<a class={isDocsActive('/docs/fluffy/')} href="/docs/fluffy/introduction">
99+
Fluffy (styled) Kit
100+
</a>
77101
)}
78-
<a href="https://discord.gg/PVWUUejrez" target="_blank">
102+
<a
103+
class={isRouteActive('https://discord.gg/PVWUUejrez')}
104+
href="https://discord.gg/PVWUUejrez"
105+
target="_blank"
106+
>
79107
Community
80108
</a>
81109
{/* <a href="/contact">Contact</a> */}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515

1616
h1 {
17-
@apply text-3xl font-extrabold md:mb-12 md:text-5xl;
17+
@apply mb-6 text-3xl font-extrabold md:mb-12 md:text-5xl;
1818
}
1919

2020
h2 {
@@ -51,7 +51,11 @@
5151
}
5252

5353
p code {
54-
@apply shadow-dark-low dark:shadow-dark-low border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 mx-1 w-max rounded-md border-[1px] border-b-[2px] border-[#333333] bg-white px-2 py-[2px] font-medium text-slate-800 dark:border-white;
54+
@apply shadow-dark-low dark:shadow-dark-low rounded-md border-[1px] border-b-2 border-slate-700 bg-slate-100 px-2 py-[2px] dark:border-slate-400 dark:bg-slate-700;
55+
}
56+
57+
blockquote p code {
58+
@apply border-slate-700 text-slate-800 dark:border-slate-800 dark:bg-slate-50;
5559
}
5660

5761
/* adds sufficient padding to the table items / API Component */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const AnatomyTable = component$(({ propDescriptors }: AnatomyTableProps)
1313
return (
1414
<div class="overflow-auto">
1515
<table class="w-full max-w-full text-left">
16-
<tbody class="divide-y divide-slate-300 dark:divide-slate-600">
16+
<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
1717
<tr class="text-slate-950 dark:text-white">
1818
<td class="whitespace-nowrap py-2 pl-4 text-sm font-[700] font-medium sm:pl-0">
1919
Component

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ type APITableProps = {
1212
export const APITable = component$(({ propDescriptors }: APITableProps) => {
1313
return (
1414
<div class="overflow-auto">
15-
<table class="mb-6 w-full min-w-[540px] border-b border-slate-300 text-left dark:border-slate-600 sm:min-w-full">
16-
<tbody class="divide-y divide-slate-300 dark:divide-slate-600">
15+
<table class="mb-6 w-full min-w-[540px] border-b border-slate-200 text-left dark:border-slate-800 sm:min-w-full">
16+
<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
1717
<tr class="w-1/4 dark:text-white ">
1818
<th class="w-1/6 whitespace-nowrap py-2 pl-4 text-base font-[600] font-medium text-slate-700 dark:text-slate-300 sm:pl-0">
1919
Prop

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function getClassByStatus(status: ComponentStatus) {
1616
case ComponentStatus.Draft:
1717
return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low text-outline-draft';
1818
case ComponentStatus.Planned:
19-
return 'text-slate-50 bg-slate-300 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned';
19+
return 'text-white bg-slate-300 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned';
2020
default:
2121
return null;
2222
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const KeyboardInteractionTable = component$(
4444
export const KBInteractionTableRow = component$(
4545
({ keyTitle, description }: KBInteractionTableRowProps) => {
4646
return (
47-
<tr class="border-b-[1px] border-slate-300 dark:border-slate-600">
47+
<tr class="border-b-[1px] border-slate-200 dark:border-slate-800">
4848
<td class="py-4">
4949
<kbd class="shadow-light-medium dark:shadow-dark-medium border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-400 inline-block w-max rounded-md border border-b-[2px] px-2 text-base capitalize text-slate-700 dark:text-slate-950">
5050
{keyTitle}

‎apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
3030
rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;
3131
return (
3232
<nav
33-
class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto bg-slate-100
34-
pb-6 dark:bg-slate-900 lg:w-80
33+
class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px]
34+
border-slate-200 bg-slate-100 bg-white pb-6 dark:border-slate-800 dark:bg-slate-900 lg:w-80
3535
${rootStore.isSidebarOpened ? 'w-100 flex' : 'hidden lg:flex'} `}
3636
>
3737
<ul class="show mt-8 flex flex-col gap-2 pl-12 lg:hidden">
@@ -69,9 +69,11 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
6969
return (
7070
<li key={link.name + link.href}>
7171
<a
72-
class={`flex items-center rounded-lg px-4 py-2 text-xl
73-
hover:bg-slate-200 dark:hover:bg-slate-800 lg:text-sm ${
74-
isLinkActive ? 'font-bold' : ''
72+
class={`transition-color ease-step flex items-center rounded-lg px-4 py-2 text-xl text-slate-600 duration-300 hover:bg-slate-100 hover:text-slate-950
73+
focus:text-slate-950 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white dark:focus:text-white lg:text-sm ${
74+
isLinkActive
75+
? 'font-bold !text-slate-950 dark:!text-white'
76+
: ''
7577
}`}
7678
href={link.href}
7779
>

‎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
@@ -20,10 +20,10 @@ export const PreviewCodeExample = component$(({ ...props }) => {
2020
selectedClassName="previewCodeExampleSelectedTab"
2121
>
2222
<TabList class="bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex rounded-t-xl border-[1.5px] border-b-0 text-white">
23-
<Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 rounded-tl-[.625rem] px-4 py-2">
23+
<Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 text-outline-lg rounded-tl-[.625rem] px-4 py-2">
2424
Preview
2525
</Tab>
26-
<Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 px-4 py-2">
26+
<Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 text-outline-lg px-4 py-2">
2727
Code
2828
</Tab>
2929
</TabList>

0 commit comments

Comments
 (0)