Skip to content

Commit 4f263a8

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #404 from thejackshelton/feat-combobox
feat(combobox): autocomplete config
2 parents 189bd8b + 54c8330 commit 4f263a8

Some content is hidden

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

59 files changed

+4647
-1191
lines changed

‎.vscode/settings.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
22
"git.pullTags": false,
3-
"conventionalCommits.scopes": ["tailwind"]
3+
"conventionalCommits.scopes": ["tailwind"],
4+
"editor.codeActionsOnSave": {
5+
"source.removeUnusedImports": true
6+
}
47
}

‎apps/website/public/images/fluffy-hero.webp

42.9 KB
Binary file not shown.

‎apps/website/public/images/morphing-diamonds.svg

Loading

‎apps/website/public/images/qwikui-hero.webp

23.8 KB
Binary file not shown.

‎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: 93 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,6 @@
22
@tailwind base;
33
@tailwind utilities;
44

5-
@font-face {
6-
font-family: 'Poppins';
7-
font-style: normal;
8-
font-weight: 400;
9-
font-display: fallback;
10-
src: url('/fonts/poppins-400.woff2') format('woff2');
11-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
12-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
13-
}
14-
15-
@font-face {
16-
font-family: 'Poppins';
17-
font-style: normal;
18-
font-weight: 500;
19-
font-display: fallback;
20-
src: url('/fonts/poppins-500.woff2') format('woff2');
21-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
22-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
23-
}
24-
25-
@font-face {
26-
font-family: 'Poppins';
27-
font-style: normal;
28-
font-weight: 700;
29-
font-display: fallback;
30-
src: url('/fonts/poppins-700.woff2') format('woff2');
31-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
32-
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
33-
}
34-
355
:root {
366
--qwik-dark-blue: #006ce9;
377
--qwik-light-blue: #18b6f6;
@@ -42,49 +12,91 @@
4212
--light-color-bg: rgb(203 213 225);
4313
--light-color-text: #333;
4414

45-
--shadow-color: 0deg 0% 63%;
46-
--shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
47-
0.9px 1px 1.5px -1.2px hsl(var(--shadow-color) / 0.34),
48-
2.1px 2.3px 3.5px -2.5px hsl(var(--shadow-color) / 0.34);
49-
--shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.36),
50-
1.7px 1.9px 2.9px -0.8px hsl(var(--shadow-color) / 0.36),
51-
4.3px 4.8px 7.2px -1.7px hsl(var(--shadow-color) / 0.36),
52-
10.4px 11.6px 17.5px -2.5px hsl(var(--shadow-color) / 0.36);
53-
--shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
54-
3px 3.4px 5.1px -0.4px hsl(var(--shadow-color) / 0.34),
55-
5.6px 6.3px 9.5px -0.7px hsl(var(--shadow-color) / 0.34),
56-
9.3px 10.4px 15.7px -1.1px hsl(var(--shadow-color) / 0.34),
57-
14.8px 16.6px 25px -1.4px hsl(var(--shadow-color) / 0.34),
58-
23.1px 26px 39.1px -1.8px hsl(var(--shadow-color) / 0.34),
59-
35.1px 39.5px 59.4px -2.1px hsl(var(--shadow-color) / 0.34),
60-
51.8px 58.2px 87.7px -2.5px hsl(var(--shadow-color) / 0.34);
15+
/* primary colors */
16+
--qwikui-purple-50: #f9f5ff;
17+
--qwikui-purple-100: #f2e8ff;
18+
--qwikui-purple-200: #e7d6fe;
19+
--qwikui-purple-300: #d4b5fd;
20+
--qwikui-purple-400: #b37bfa;
21+
--qwikui-purple-500: #9f57f5;
22+
--qwikui-purple-600: #8835e8;
23+
--qwikui-purple-700: #7424cc;
24+
--qwikui-purple-800: #6323a6;
25+
--qwikui-purple-900: #521d86;
26+
--qwikui-purple-950: #360863;
27+
28+
--qwikui-blue-50: #effaff;
29+
--qwikui-blue-100: #def3ff;
30+
--qwikui-blue-200: #b6eaff;
31+
--qwikui-blue-300: #76dbff;
32+
--qwikui-blue-400: #2dcaff;
33+
--qwikui-blue-500: #02b9fc;
34+
--qwikui-blue-600: #0090d2;
35+
--qwikui-blue-700: #0073aa;
36+
--qwikui-blue-800: #00618c;
37+
--qwikui-blue-900: #075073;
38+
--qwikui-blue-950: #04334d;
6139

40+
/* neutrals */
41+
--qwikui-slate-50: #f8fafc;
42+
--qwikui-slate-100: #f1f5f9;
43+
--qwikui-slate-200: #e2e8f0;
44+
--qwikui-slate-300: #cbd5e1;
45+
--qwikui-slate-400: #94a3b8;
46+
--qwikui-slate-500: #64748b;
47+
--qwikui-slate-600: #475569;
48+
--qwikui-slate-700: #334155;
49+
--qwikui-slate-800: #1e293b;
50+
--qwikui-slate-900: #0f172a;
51+
--qwikui-slate-950: #020617;
52+
53+
/* light themed shadows */
54+
--light-shadow-color: 0deg 0% 63%;
55+
--light-shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.34),
56+
0.4px 0.8px 1px -1.2px hsl(var(--light-shadow-color) / 0.34),
57+
1px 2px 2.5px -2.5px hsl(var(--light-shadow-color) / 0.34);
58+
--light-shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.36),
59+
0.8px 1.6px 2px -0.8px hsl(var(--light-shadow-color) / 0.36),
60+
2.1px 4.1px 5.2px -1.7px hsl(var(--light-shadow-color) / 0.36),
61+
5px 10px 12.6px -2.5px hsl(var(--light-shadow-color) / 0.36);
62+
--light-shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.3),
63+
1.3px 2.6px 3.3px -0.3px hsl(var(--light-shadow-color) / 0.3),
64+
2.4px 4.8px 6px -0.6px hsl(var(--light-shadow-color) / 0.3),
65+
3.7px 7.5px 9.4px -0.9px hsl(var(--light-shadow-color) / 0.3),
66+
5.7px 11.3px 14.2px -1.2px hsl(var(--light-shadow-color) / 0.3),
67+
8.5px 16.9px 21.3px -1.6px hsl(var(--light-shadow-color) / 0.3),
68+
12.4px 24.9px 31.3px -1.9px hsl(var(--light-shadow-color) / 0.3),
69+
17.8px 35.7px 44.9px -2.2px hsl(var(--light-shadow-color) / 0.3),
70+
25px 50px 62.9px -2.5px hsl(var(--light-shadow-color) / 0.3);
71+
72+
/* dark themed shadows */
6273
--dark-shadow-color: 218deg 49% 7%;
63-
--dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
64-
0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
65-
2.2px 2.6px 3.8px -2.5px hsl(var(--dark-shadow-color) / 0.34);
66-
--dark-shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.36),
67-
1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
68-
4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
69-
10.8px 12.8px 18.8px -2.5px hsl(var(--dark-shadow-color) / 0.36);
70-
--dark-shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.34),
71-
3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
72-
5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
73-
9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
74-
15.4px 18.3px 26.9px -1.4px hsl(var(--dark-shadow-color) / 0.34),
75-
24.1px 28.6px 42.1px -1.8px hsl(var(--dark-shadow-color) / 0.34),
76-
36.6px 43.5px 64px -2.1px hsl(var(--dark-shadow-color) / 0.34),
77-
53.9px 64.1px 94.2px -2.5px hsl(var(--dark-shadow-color) / 0.34);
74+
--dark-shadow-elevation-low: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.34),
75+
0.7px 1px 1.4px -1.2px hsl(var(--dark-shadow-color) / 0.34),
76+
1.7px 2.5px 3.4px -2.5px hsl(var(--dark-shadow-color) / 0.34);
77+
--dark-shadow-elevation-medium: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.36),
78+
1.4px 2px 2.7px -0.8px hsl(var(--dark-shadow-color) / 0.36),
79+
3.5px 5.1px 7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
80+
8.6px 12.3px 16.9px -2.5px hsl(var(--dark-shadow-color) / 0.36);
81+
--dark-shadow-elevation-high: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.3),
82+
2.3px 3.2px 4.4px -0.3px hsl(var(--dark-shadow-color) / 0.3),
83+
4.1px 5.8px 8px -0.6px hsl(var(--dark-shadow-color) / 0.3),
84+
6.4px 9.2px 12.6px -0.9px hsl(var(--dark-shadow-color) / 0.3),
85+
9.8px 13.9px 19.1px -1.2px hsl(var(--dark-shadow-color) / 0.3),
86+
14.6px 20.8px 28.6px -1.6px hsl(var(--dark-shadow-color) / 0.3),
87+
21.4px 30.6px 42px -1.9px hsl(var(--dark-shadow-color) / 0.3),
88+
30.8px 43.9px 60.3px -2.2px hsl(var(--dark-shadow-color) / 0.3),
89+
43.1px 61.5px 84.5px -2.5px hsl(var(--dark-shadow-color) / 0.3);
7890
}
7991

8092
.light {
8193
--color-bg: rgb(255, 255, 255);
82-
--color-text: #333;
94+
--color-text: var(--qwikui-slate-950);
8395
}
8496

8597
.dark {
86-
--color-bg: rgb(30 41 59);
87-
--color-text: rgb(243, 243, 243);
98+
--color-bg: var(--qwikui-slate-800);
99+
--color-text: #fff;
88100
}
89101

90102
html {
@@ -94,14 +106,27 @@ html {
94106

95107
background-color: var(--color-bg) !important;
96108
color: var(--color-text) !important;
97-
98-
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
99-
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
100-
'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
101109
}
102110

103111
body {
104112
min-height: 100%;
113+
font-family: 'Inter Variable', sans-serif;
114+
}
115+
116+
h1,
117+
h2,
118+
h3,
119+
h4,
120+
h5,
121+
h6 {
122+
overflow-wrap: break-word;
123+
line-height: 1.2;
124+
}
125+
126+
p,
127+
ul,
128+
ol {
129+
line-height: 1.75;
105130
}
106131

107132
.layout {

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ export const Footer = component$(() => {
1010
<div class="px-5 py-2">
1111
<a
1212
href="/about"
13-
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
13+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-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-500 hover:text-gray-900 dark:hover:text-gray-300"
21+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-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-500 hover:text-gray-900 dark:hover:text-gray-300"
31+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-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-500 hover:text-gray-900 dark:hover:text-gray-300"
41+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-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-500 hover:text-gray-900 dark:hover:text-gray-300"
50+
class="text-base text-gray-800 dark:text-white hover:text-gray-900 dark:hover:text-gray-300"
5151
>
5252
Qwik Documentation
5353
</a>
@@ -58,15 +58,15 @@ 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-400 hover:text-gray-500"
61+
class="text-gray-600 hover:text-gray-800 dark:text-gray-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-400 hover:text-gray-500"
69+
class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
7070
>
7171
<DiscordIcon />
7272
</a>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { $, component$, useComputed$ } from '@builder.io/qwik';
2-
import { useLocation } from '@builder.io/qwik-city';
32
// eslint-disable-next-line @nx/enforce-module-boundaries
43
import { version as headlessVersion } from '../../../../../../packages/kit-headless/package.json';
54
// eslint-disable-next-line @nx/enforce-module-boundaries
@@ -22,7 +21,6 @@ export interface HeaderProps {
2221
export default component$(
2322
({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
2423
const rootStore = useRootStore();
25-
const location = useLocation();
2624
const selectedKitSig = useSelectedKit();
2725

2826
const kitSignal = useComputed$(() => {
@@ -44,15 +42,16 @@ export default component$(
4442
rootStore.mode = rootStore.mode === 'light' ? 'dark' : 'light';
4543
});
4644

45+
// we can add back the header animation if you'd like. Maybe something springy with motion?
4746
return (
4847
<header
4948
class={[
5049
`fixed top-0 w-full h-20 md:h-20 z-20 md:bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
51-
`ease-in-out duration-300`,
50+
`shadow-light-medium dark:shadow-dark-medium`,
5251
rootStore.isSidebarOpened
5352
? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
5453
: 'bg-[var(--color-bg)]',
55-
showBottomBorder ? `border-b-[1px] border-slate-300 dark:border-slate-600` : ``,
54+
showBottomBorder ? `shadow-light-medium dark:shadow-dark-medium` : ``,
5655
]}
5756
>
5857
<section class="flex flex-col md:flex-row gap-1 md:gap-8 mr-auto">

‎apps/website/src/routes/_components/kit-selection-cta/kit-selection-cta.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Slot, component$ } from '@builder.io/qwik';
22
import { Card, CardBody, CardImage, CardTitle } from '@qwik-ui/headless';
33
export interface Kit {
4-
kit: 'headless' | 'tailwind';
4+
kit: 'headless' | 'fluffy';
55
}
66
export default component$(({ kit }: Kit) => {
77
return (
@@ -13,7 +13,7 @@ export default component$(({ kit }: Kit) => {
1313
>
1414
<Card>
1515
<CardImage
16-
src={`/images/kit-cta-${kit}.png`}
16+
src={`/images/fluffy-hero.webp`}
1717
width="611"
1818
height="408"
1919
alt={`${kit} kit`}

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

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,42 +19,21 @@ 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" />
4625
<meta name="twitter:title" content="Qwik" />
4726

48-
{head.meta.map((m) => (
49-
<meta {...m} />
27+
{head.meta.map((m, i) => (
28+
<meta key={i} {...m} />
5029
))}
5130

52-
{head.links.map((l) => (
53-
<link {...l} />
31+
{head.links.map((l, i) => (
32+
<link key={i} {...l} />
5433
))}
5534

56-
{head.styles.map((s) => (
57-
<style {...s.props} dangerouslySetInnerHTML={s.style} />
35+
{head.styles.map((s, i) => (
36+
<style key={i} {...s.props} dangerouslySetInnerHTML={s.style} />
5837
))}
5938

6039
<CSSThemeScript />

0 commit comments

Comments
 (0)