feature(modal): provide initial implementation

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

@@ -25,6 +25,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Input: ComponentStatus.Planned,
     'Input Phone': ComponentStatus.Planned,
     'Navigation Bar': ComponentStatus.Planned,
+    Modal: ComponentStatus.Planned,
     Pagination: ComponentStatus.Planned,
     Popover: ComponentStatus.Planned,
     Progress: ComponentStatus.Planned,
@@ -43,6 +44,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Carousel: ComponentStatus.Planned,
     Combobox: ComponentStatus.Beta,
     Popover: ComponentStatus.Draft,
+    Modal: ComponentStatus.Beta,
     Select: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,

apps/website/src/global.css

@@ -36,15 +36,15 @@
 
     --border-radius: 0.375rem;
 
-    --shiki-color-text: theme('colors.black');
-    --shiki-token-constant: theme('colors.emerald.800');
-    --shiki-token-string: theme('colors.emerald.700');
-    --shiki-token-comment: theme('colors.zinc.700');
-    --shiki-token-keyword: theme('colors.sky.600');
-    --shiki-token-parameter: theme('colors.pink.700');
-    --shiki-token-function: theme('colors.purple.700');
-    --shiki-token-string-expression: theme('colors.emerald.700');
-    --shiki-token-punctuation: theme('colors.zinc.700');
+    --shiki-color-text: theme('colors.white');
+    --shiki-token-constant: theme('colors.emerald.300');
+    --shiki-token-string: theme('colors.emerald.300');
+    --shiki-token-comment: theme('colors.zinc.500');
+    --shiki-token-keyword: theme('colors.sky.300');
+    --shiki-token-parameter: theme('colors.pink.300');
+    --shiki-token-function: theme('colors.violet.300');
+    --shiki-token-string-expression: theme('colors.emerald.300');
+    --shiki-token-punctuation: theme('colors.zinc.200');
   }
 
   .dark {
@@ -78,16 +78,6 @@
     --color-input: 263 32.6% 17.5%;
 
     --color-ring: 263 26.8% 83.9%;
-
-    --shiki-color-text: theme('colors.white');
-    --shiki-token-constant: theme('colors.emerald.300');
-    --shiki-token-string: theme('colors.emerald.300');
-    --shiki-token-comment: theme('colors.zinc.500');
-    --shiki-token-keyword: theme('colors.sky.300');
-    --shiki-token-parameter: theme('colors.pink.300');
-    --shiki-token-function: theme('colors.violet.300');
-    --shiki-token-string-expression: theme('colors.emerald.300');
-    --shiki-token-punctuation: theme('colors.zinc.200');
   }
 }
 
@@ -98,6 +88,77 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  *::-webkit-scrollbar {
+    background-color: transparent;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    /* Thumb color */
+    background-color: var(--qwikui-slate-500);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    border: 0.3rem solid transparent;
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-left: 1px solid var(--qwikui-slate-300);
+  }
+
+  .dark *::-webkit-scrollbar-thumb {
+    background-color: var(--qwikui-slate-500);
+  }
+
+  .dark *::-webkit-scrollbar-track {
+    background: var(--qwikui-slate-950);
+    border-left: 1px solid var(--qwikui-slate-800);
+  }
+
+  .code-example *::-webkit-scrollbar-track {
+    background: transparent;
+    border-left: 0px;
+  }
+
+  .code-example *::-webkit-scrollbar-thumb {
+    background: var(--qwikui-slate-400);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    border: 0.35rem solid transparent;
+  }
+
+  .code-example *::-webkit-scrollbar-thumb:hover {
+    background: var(--qwikui-slate-500);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    border: 0.35rem solid transparent;
+  }
+
+  .code-example-gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--qwikui-slate-900),
+      var(--qwikui-slate-800)
+    );
+  }
+  .dark .code-example-gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--qwikui-slate-800),
+      var(--qwikui-slate-900)
+    );
+  }
+
+  /* no horizontal overflow on code examples */
+  .tab-size pre {
+    white-space: pre-wrap;
+  }
 }
 
 :root {
@@ -227,11 +288,6 @@ ol {
   line-height: 1.75;
 }
 
-.layout {
-  grid-template-columns: 25% 70%;
-  grid-template-areas: 'sidebar  content';
-}
-
 /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
   It would make more sense to supply the user with the animation declaration in the docs.
 */
@@ -314,4 +370,16 @@ ol {
       -0.8px -0.8px 0 var(--qwikui-purple-700), 0.8px -0.8px 0 var(--qwikui-purple-700),
       -0.8px 0.8px 0 var(--qwikui-purple-700), 0.8px 0.8px 0 var(--qwikui-purple-700);
   }
+
+  .setup-grid-areas {
+    grid-template-areas: 'nav main toc';
+  }
+
+  .copy-btn-bg-dark {
+    background: hsla(215, 25%, 27%, 0.9);
+  }
+
+  .copy-btn-bg-light {
+    background: hsla(214, 32%, 91%, 0.9);
+  }
 }

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

@@ -64,7 +64,7 @@ export default component$(
     return (
       <header
         class={[
-          `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`,
+          `sticky 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`,
           `shadow-light-low dark:shadow-dark-medium`,
           rootStore.isSidebarOpened
             ? 'bg-blue-200 brightness-75 dark:bg-indigo-900'

apps/website/src/routes/docs.css

@@ -1,6 +1,6 @@
 .docs {
   & {
-    @apply w-full overflow-hidden px-8 py-8 lg:ml-80 lg:max-w-4xl lg:px-16 xl:max-w-6xl;
+    @apply mx-auto w-full max-w-[85ch] overflow-hidden px-8 py-8 lg:px-16;
   }
 
   /*
@@ -14,7 +14,7 @@
     }
 
     h1 {
-      @apply mb-6 text-3xl font-extrabold md:mb-12 md:text-5xl;
+      @apply mb-6 pt-6 text-3xl font-extrabold md:text-5xl;
     }
 
     h2 {
@@ -34,7 +34,7 @@
     }
 
     blockquote {
-      @apply bg-qwikui-blue-800 shadow-light-medium dark:shadow-dark-medium dark:bg-qwikui-purple-800 border-qwikui-blue-200 dark:border-qwikui-purple-200 my-4 rounded-xl border-[2px] p-4 text-white lg:p-6;
+      @apply from-qwikui-blue-800 to-qwikui-blue-900 shadow-light-medium dark:shadow-dark-medium dark:from-qwikui-purple-800 dark:to-qwikui-purple-900 border-qwikui-blue-200 dark:border-qwikui-purple-200 my-4 rounded-xl border-[2px] bg-gradient-to-b p-4 text-white lg:p-6;
     }
 
     ul {

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

@@ -28,12 +28,12 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
           {propDescriptors?.map((propDescriptor) => {
             return (
               <tr key={propDescriptor.name}>
-                <td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
+                <td class="prose prose-sm py-3 pl-4 sm:pl-0 ">
                   <code class="border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 mr-6 rounded-md border-[1px] border-b-[2px] font-[400] text-slate-950">
                     {propDescriptor.name}
                   </code>
                 </td>
-                <td class="py-3 align-baseline">
+                <td class="py-3">
                   <span class="flex items-center">
                     <code class="rounded-md border-[1px] border-b-2 border-slate-700 bg-slate-100 px-2 dark:border-slate-400 dark:bg-slate-700">
                       {propDescriptor.type}

apps/website/src/routes/docs/_components/code-copy/code-copy.tsx

@@ -24,6 +24,10 @@ export const CodeCopy = component$(
         onClick$={async () => {
           await copy(code);
           copied.value = true;
+
+          setTimeout(() => {
+            copied.value = false;
+          }, 4000);
         }}
       >
         {!copied.value ? 'Copy' : 'Copied!'}

apps/website/src/routes/docs/_components/highlight/highlight.tsx

@@ -47,15 +47,23 @@ export const Highlight = component$(
     });
 
     return (
-      <div
-        {...props}
-        class={[
-          'tab-size relative max-w-full overflow-hidden overflow-x-auto rounded-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
-          props.class,
-        ]}
-      >
-        <div dangerouslySetInnerHTML={codeSig.value} />
-        <CodeCopy class={['absolute right-2 top-2', copyCodeClass]} code={code} />
+      <div class="code-example relative max-h-[31.25rem] rounded-b-xl">
+        <CodeCopy
+          class={[
+            'copy-btn-bg-dark absolute right-4 top-4 bg-slate-200 text-white hover:bg-slate-600 hover:text-white',
+            copyCodeClass,
+          ]}
+          code={code}
+        />
+        <div
+          {...props}
+          class={[
+            'tab-size code-example-gradient max-h-[31.25rem] max-w-full overflow-auto rounded-xl bg-slate-800 p-6 text-sm dark:bg-slate-800',
+            props.class,
+          ]}
+        >
+          <div dangerouslySetInnerHTML={codeSig.value} />
+        </div>
       </div>
     );
   },

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

@@ -30,8 +30,8 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
     rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;
   return (
     <nav
-      class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px]
-              border-slate-200 bg-slate-100 bg-white pb-6 dark:border-slate-800 dark:bg-slate-900  lg:w-80
+      class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px] border-slate-200
+              bg-slate-100 bg-white pb-6 [grid-area:nav] dark:border-slate-800 dark:bg-slate-900  lg:w-80
               ${rootStore.isSidebarOpened ? 'w-100 flex' : 'hidden lg:flex'} `}
     >
       <ul class="show mt-8 flex flex-col gap-2 pl-12 lg:hidden">
@@ -59,7 +59,7 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
       {linksGroups?.map((group) => {
         return (
           <>
-            <div class="px-6 pt-6">
+            <div class="px-6 pt-8">
               <h2 class="bg-qwikui-blue-600 dark:bg-qwikui-purple-800 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 text-outline-lg mb-4 rounded-lg border-2 px-4 py-1 text-3xl font-bold  text-white lg:text-lg">
                 {group.name}
               </h2>

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

@@ -21,7 +21,7 @@ export const PreviewCodeExampleTabs = component$((props: PreviewCodeExampleProps
       class="shadow-light-medium dark:shadow-dark-medium mb-12 rounded-xl"
       selectedClassName="previewCodeExampleSelectedTab"
     >
-      <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">
+      <TabList class="bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 flex rounded-t-xl border-[1.5px] border-b-0 text-white">
         <Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 text-outline-lg rounded-tl-[.625rem] px-4 py-2">
           Preview
         </Tab>
@@ -35,7 +35,7 @@ export const PreviewCodeExampleTabs = component$((props: PreviewCodeExampleProps
         </section>
       </TabPanel>
       <TabPanel class="border-qwikui-blue-300 dark:border-qwikui-purple-200 relative rounded-b-xl border-[1.5px]">
-        <Highlight code={props.code} />
+        <Highlight class="rounded-b-xl rounded-t-none" code={props.code} />
       </TabPanel>
     </Tabs>
   );

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

@@ -4,7 +4,7 @@ import { PreviewCodeExampleProps } from './preview-code-example-props.type';
 
 export const PreviewCodeExampleVertical = component$((props: PreviewCodeExampleProps) => {
   return (
-    <div class="dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex w-full flex-col rounded-b-xl rounded-t-xl border-[1.5px] border-solid border-slate-200">
+    <div class="dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex w-full flex-col rounded-xl border-[1.5px] border-solid border-slate-200">
       <h3 class=" flex rounded-t-xl text-white"></h3>
       <section class="rounded-t-xl bg-slate-50 p-4 dark:bg-slate-800">
         <Slot name="actualComponent" />
@@ -13,7 +13,7 @@ export const PreviewCodeExampleVertical = component$((props: PreviewCodeExampleP
         Code
       </h3>
       <aside class="rounded-b-xl border-[1.5px] border-solid">
-        <Highlight code={props.code} class="rounded" />
+        <Highlight code={props.code} class="rounded rounded-t-none" />
       </aside>
     </div>
   );

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

@@ -69,19 +69,19 @@ function getBackgroundByStatus(status?: ComponentStatus) {
     case ComponentStatus.Ready:
       return 'bg-green-300';
     case ComponentStatus.Beta:
-      return 'bg-qwikui-blue-800 dark:bg-qwikui-purple-800';
+      return 'bg-gradient-to-b from-qwikui-blue-800 to-qwikui-blue-900 dark:from-qwikui-purple-800 dark:to-qwikui-purple-900';
     case ComponentStatus.Draft:
-      return 'bg-orange-700 dark:bg-red-800';
+      return 'bg-gradient-to-b from-orange-700 to-orange-800 dark:from-red-700 dark:to-red-800';
     case ComponentStatus.Planned:
     default:
-      return 'bg-orange-700 dark:bg-red-800';
+      return 'bg-gradient-to-b from-orange-700 to-orange-800 dark:from-red-700 dark:to-red-800';
   }
 }
 
 export const StatusBanner = component$((props: StatusBannerProps) => {
   const ref = useSignal<HTMLElement | undefined>();
   const isBannerClosedSig = useSignal(false);
-  const marginBottom = 32;
+  const marginBottom = 64;
 
   useStylesScoped$(`
 
@@ -90,7 +90,7 @@ export const StatusBanner = component$((props: StatusBannerProps) => {
   }
 
   .fade {
-    animation: fadeOut 0.5s ease forwards;
+    animation: fadeOut 1s cubic-bezier(0.6, 0.6, 0, 1) forwards;
     margin-top: var(--dynamic-banner-height);
   }