Merge branch 'main' into pr-fluffy-experiment

Author: shairez

.vscode/settings.json

@@ -3,5 +3,8 @@
   "conventionalCommits.scopes": ["fluffy", "headless", "docs"],
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
+  ],
+  "editor.codeActionsOnSave": {
+    "source.removeUnusedImports": true
+  }
 }

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

@@ -41,7 +41,7 @@ export const statusByComponent: ComponentKitsStatuses = {
   headless: {
     Accordion: ComponentStatus.Beta,
     Carousel: ComponentStatus.Planned,
-    Combobox: ComponentStatus.Draft,
+    Combobox: ComponentStatus.Beta,
     Popover: ComponentStatus.Draft,
     Select: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,

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

@@ -91,49 +91,91 @@
   --light-color-bg: rgb(203 213 225);
   --light-color-text: #333;
 
-  --shadow-color: 0deg 0% 63%;
-  --shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
-    0.9px 1px 1.5px -1.2px hsl(var(--shadow-color) / 0.34),
-    2.1px 2.3px 3.5px -2.5px hsl(var(--shadow-color) / 0.34);
-  --shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.36),
-    1.7px 1.9px 2.9px -0.8px hsl(var(--shadow-color) / 0.36),
-    4.3px 4.8px 7.2px -1.7px hsl(var(--shadow-color) / 0.36),
-    10.4px 11.6px 17.5px -2.5px hsl(var(--shadow-color) / 0.36);
-  --shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
-    3px 3.4px 5.1px -0.4px hsl(var(--shadow-color) / 0.34),
-    5.6px 6.3px 9.5px -0.7px hsl(var(--shadow-color) / 0.34),
-    9.3px 10.4px 15.7px -1.1px hsl(var(--shadow-color) / 0.34),
-    14.8px 16.6px 25px -1.4px hsl(var(--shadow-color) / 0.34),
-    23.1px 26px 39.1px -1.8px hsl(var(--shadow-color) / 0.34),
-    35.1px 39.5px 59.4px -2.1px hsl(var(--shadow-color) / 0.34),
-    51.8px 58.2px 87.7px -2.5px hsl(var(--shadow-color) / 0.34);
-
+  /* primary colors */
+  --qwikui-purple-50: #f9f5ff;
+  --qwikui-purple-100: #f2e8ff;
+  --qwikui-purple-200: #e7d6fe;
+  --qwikui-purple-300: #d4b5fd;
+  --qwikui-purple-400: #b37bfa;
+  --qwikui-purple-500: #9f57f5;
+  --qwikui-purple-600: #8835e8;
+  --qwikui-purple-700: #7424cc;
+  --qwikui-purple-800: #6323a6;
+  --qwikui-purple-900: #521d86;
+  --qwikui-purple-950: #360863;
+
+  --qwikui-blue-50: #effaff;
+  --qwikui-blue-100: #def3ff;
+  --qwikui-blue-200: #b6eaff;
+  --qwikui-blue-300: #76dbff;
+  --qwikui-blue-400: #2dcaff;
+  --qwikui-blue-500: #02b9fc;
+  --qwikui-blue-600: #0090d2;
+  --qwikui-blue-700: #0073aa;
+  --qwikui-blue-800: #00618c;
+  --qwikui-blue-900: #075073;
+  --qwikui-blue-950: #04334d;
+
+  /* neutrals */
+  --qwikui-slate-50: #f8fafc;
+  --qwikui-slate-100: #f1f5f9;
+  --qwikui-slate-200: #e2e8f0;
+  --qwikui-slate-300: #cbd5e1;
+  --qwikui-slate-400: #94a3b8;
+  --qwikui-slate-500: #64748b;
+  --qwikui-slate-600: #475569;
+  --qwikui-slate-700: #334155;
+  --qwikui-slate-800: #1e293b;
+  --qwikui-slate-900: #0f172a;
+  --qwikui-slate-950: #020617;
+
+  /* light themed shadows */
+  --light-shadow-color: 0deg 0% 63%;
+  --light-shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.34),
+    0.4px 0.8px 1px -1.2px hsl(var(--light-shadow-color) / 0.34),
+    1px 2px 2.5px -2.5px hsl(var(--light-shadow-color) / 0.34);
+  --light-shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.36),
+    0.8px 1.6px 2px -0.8px hsl(var(--light-shadow-color) / 0.36),
+    2.1px 4.1px 5.2px -1.7px hsl(var(--light-shadow-color) / 0.36),
+    5px 10px 12.6px -2.5px hsl(var(--light-shadow-color) / 0.36);
+  --light-shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--light-shadow-color) / 0.3),
+    1.3px 2.6px 3.3px -0.3px hsl(var(--light-shadow-color) / 0.3),
+    2.4px 4.8px 6px -0.6px hsl(var(--light-shadow-color) / 0.3),
+    3.7px 7.5px 9.4px -0.9px hsl(var(--light-shadow-color) / 0.3),
+    5.7px 11.3px 14.2px -1.2px hsl(var(--light-shadow-color) / 0.3),
+    8.5px 16.9px 21.3px -1.6px hsl(var(--light-shadow-color) / 0.3),
+    12.4px 24.9px 31.3px -1.9px hsl(var(--light-shadow-color) / 0.3),
+    17.8px 35.7px 44.9px -2.2px hsl(var(--light-shadow-color) / 0.3),
+    25px 50px 62.9px -2.5px hsl(var(--light-shadow-color) / 0.3);
+
+  /* dark themed shadows */
   --dark-shadow-color: 218deg 49% 7%;
-  --dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
-    0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
-    2.2px 2.6px 3.8px -2.5px hsl(var(--dark-shadow-color) / 0.34);
-  --dark-shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.36),
-    1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
-    4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
-    10.8px 12.8px 18.8px -2.5px hsl(var(--dark-shadow-color) / 0.36);
-  --dark-shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.34),
-    3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
-    5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
-    9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
-    15.4px 18.3px 26.9px -1.4px hsl(var(--dark-shadow-color) / 0.34),
-    24.1px 28.6px 42.1px -1.8px hsl(var(--dark-shadow-color) / 0.34),
-    36.6px 43.5px 64px -2.1px hsl(var(--dark-shadow-color) / 0.34),
-    53.9px 64.1px 94.2px -2.5px hsl(var(--dark-shadow-color) / 0.34);
+  --dark-shadow-elevation-low: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.34),
+    0.7px 1px 1.4px -1.2px hsl(var(--dark-shadow-color) / 0.34),
+    1.7px 2.5px 3.4px -2.5px hsl(var(--dark-shadow-color) / 0.34);
+  --dark-shadow-elevation-medium: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.36),
+    1.4px 2px 2.7px -0.8px hsl(var(--dark-shadow-color) / 0.36),
+    3.5px 5.1px 7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
+    8.6px 12.3px 16.9px -2.5px hsl(var(--dark-shadow-color) / 0.36);
+  --dark-shadow-elevation-high: 0.4px 0.6px 0.8px hsl(var(--dark-shadow-color) / 0.3),
+    2.3px 3.2px 4.4px -0.3px hsl(var(--dark-shadow-color) / 0.3),
+    4.1px 5.8px 8px -0.6px hsl(var(--dark-shadow-color) / 0.3),
+    6.4px 9.2px 12.6px -0.9px hsl(var(--dark-shadow-color) / 0.3),
+    9.8px 13.9px 19.1px -1.2px hsl(var(--dark-shadow-color) / 0.3),
+    14.6px 20.8px 28.6px -1.6px hsl(var(--dark-shadow-color) / 0.3),
+    21.4px 30.6px 42px -1.9px hsl(var(--dark-shadow-color) / 0.3),
+    30.8px 43.9px 60.3px -2.2px hsl(var(--dark-shadow-color) / 0.3),
+    43.1px 61.5px 84.5px -2.5px hsl(var(--dark-shadow-color) / 0.3);
 }
 
 .light {
   --color-bg: rgb(255, 255, 255);
-  --color-text: #333;
+  --color-text: var(--qwikui-slate-950);
 }
 
 .dark {
-  --color-bg: rgb(30 41 59);
-  --color-text: rgb(243, 243, 243);
+  --color-bg: var(--qwikui-slate-800);
+  --color-text: #fff;
 }
 
 html {
@@ -147,6 +189,23 @@ html {
 
 body {
   min-height: 100%;
+  font-family: 'Inter Variable', sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  line-height: 1.2;
+}
+
+p,
+ul,
+ol {
+  line-height: 1.75;
 }
 
 .layout {

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

@@ -5,20 +5,20 @@ import { DiscordIcon } from '../icons/discord';
 export const Footer = component$(() => {
   return (
     <footer class="bg-gray-300 dark:bg-gray-900">
-      <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-7xl overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
         <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
           <div class="px-5 py-2">
             <a
               href="/about"
-              class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
+              class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
             >
               About
             </a>
           </div>
           <div class="px-5 py-2">
             <a
               href="/docs/headless/introduction"
-              class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
+              class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
             >
               Headless Kit
             </a>
@@ -28,7 +28,7 @@ export const Footer = component$(() => {
             <a
               href="https://discord.gg/PVWUUejrez"
               target="_blank"
-              class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
+              class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
             >
               Community
             </a>
@@ -38,7 +38,7 @@ export const Footer = component$(() => {
             <a
               href="https://www.w3.org/standards/webdesign/accessibility"
               target="_blank"
-              class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
+              class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
             >
               Accessibility
             </a>
@@ -47,7 +47,7 @@ export const Footer = component$(() => {
             <a
               href="https://qwik.builder.io/docs"
               target="_blank"
-              class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
+              class="text-base text-gray-800 hover:text-gray-900 dark:text-white dark:hover:text-gray-300"
             >
               Qwik Documentation
             </a>
@@ -58,20 +58,20 @@ export const Footer = component$(() => {
             target="_blank"
             href="https://github.com/qwikifiers/qwik-ui"
             aria-label="Qwik-UI GitHub repository"
-            class="text-gray-400 hover:text-gray-500"
+            class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
           >
             <GitHubIcon />
           </a>
           <a
             target="_blank"
             href="https://discord.gg/PVWUUejrez"
             aria-label="Qwik-UI Discord server"
-            class="text-gray-400 hover:text-gray-500"
+            class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
           >
             <DiscordIcon />
           </a>
         </div>
-        <p class="mt-8 text-center text-base dark:text-gray-400 text-gray-600">
+        <p class="mt-8 text-center text-base text-gray-600 dark:text-gray-400">
           &copy; 2023 Qwik UI. All rights reserved.
         </p>
       </div>

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

@@ -1,5 +1,4 @@
 import { $, component$, useComputed$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { version as headlessVersion } from '../../../../../../packages/kit-headless/package.json';
 // eslint-disable-next-line @nx/enforce-module-boundaries
@@ -22,7 +21,6 @@ export interface HeaderProps {
 export default component$(
   ({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
     const rootStore = useRootStore();
-    const location = useLocation();
     const selectedKitSig = useSelectedKit();
 
     const kitSignal = useComputed$(() => {
@@ -44,19 +42,20 @@ export default component$(
       rootStore.mode = rootStore.mode === 'light' ? 'dark' : 'light';
     });
 
+    // we can add back the header animation if you'd like. Maybe something springy with motion?
     return (
       <header
         class={[
           `fixed top-0 z-20 flex h-20 w-full items-center gap-8 p-4 md:h-20 md:bg-[var(--color-bg)]`,
-          `duration-300 ease-in-out`,
+          `shadow-light-medium dark:shadow-dark-medium`,
           rootStore.isSidebarOpened
             ? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
             : 'bg-[var(--color-bg)]',
-          showBottomBorder ? `border-b-[1px] border-slate-300 dark:border-slate-600` : ``,
+          showBottomBorder ? `shadow-light-medium dark:shadow-dark-medium` : ``,
         ]}
       >
         <section class="mr-auto flex flex-col gap-1 md:flex-row md:gap-8">
-          <a href="/" class="lg:ml-8">
+          <a href="/" aria-label="Qwik UI Logo" class="lg:ml-8">
             <Logo />
           </a>
 

apps/website/src/global.css

@@ -7,18 +7,18 @@ export default component$(({ kit }: Kit) => {
   return (
     <a
       href={`/docs/${kit}/introduction`}
-      class="rounded-3xl border-2 overflow-hidden 
-      hover:-outline-offset-4 hover:outline-4 hover:outline hover:outline-[var(--qwik-light-blue)] hover:scale-[1.025] 
-            focus:-outline-offset-4 focus:outline-4 focus:outline focus:outline-[var(--qwik-light-blue)] focus:scale-[1.025] duration-150"
+      class="overflow-hidden rounded-3xl border-2 
+      duration-150 hover:scale-[1.025] hover:outline hover:outline-4 hover:-outline-offset-4 
+            hover:outline-[var(--qwik-light-blue)] focus:scale-[1.025] focus:outline focus:outline-4 focus:-outline-offset-4 focus:outline-[var(--qwik-light-blue)]"
     >
       <Card>
         <CardImage
-          src={`/images/kit-cta-${kit}.png`}
+          src={`/images/fluffy-hero.webp`}
           width="611"
           height="408"
           alt={`${kit} kit`}
-          class="bg-gradient-to-r from-[var(--qwik-light-blue)] 
-          to-[var(--qwik-light-purple)] h-64 w-full object-cover"
+          class="h-64 w-full 
+          bg-gradient-to-r from-[var(--qwik-light-blue)] to-[var(--qwik-light-purple)] object-cover"
         />
         <CardBody class={`px-8 py-6`}>
           <CardTitle class="text-xl font-bold">

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

@@ -24,16 +24,16 @@ export const RouterHead = component$(() => {
       <meta name="twitter:site" content="@QwikDev" />
       <meta name="twitter:title" content="Qwik" />
 
-      {head.meta.map((m) => (
-        <meta {...m} />
+      {head.meta.map((m, i) => (
+        <meta key={i} {...m} />
       ))}
 
-      {head.links.map((l) => (
-        <link {...l} />
+      {head.links.map((l, i) => (
+        <link key={i} {...l} />
       ))}
 
-      {head.styles.map((s) => (
-        <style {...s.props} dangerouslySetInnerHTML={s.style} />
+      {head.styles.map((s, i) => (
+        <style key={i} {...s.props} dangerouslySetInnerHTML={s.style} />
       ))}
 
       <CSSThemeScript />