Merge pull request #542 from maiieul/to-css-vars

docs(colors): replace colors with css-vars for auto dark/light mode and single source of truth

Author: thejackshelton

apps/website/src/components/anatomy-table/anatomy-table.tsx

@@ -13,25 +13,27 @@ type AnatomyTableProps = {
 export const AnatomyTable = component$(
   ({ firstColumnLabel = 'Component', propDescriptors }: AnatomyTableProps) => {
     return (
-      <div class="overflow-auto">
-        <table class="w-full max-w-full text-left">
-          <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
-            <tr class="text-slate-950 dark:text-white">
-              <td class="whitespace-nowrap py-2 pl-4 text-sm font-[700] font-medium sm:pl-0">
+      <div class="prose prose-sm overflow-auto">
+        <table class="mb-6 w-full min-w-[540px] text-left sm:min-w-full">
+          <tbody class="divide-y">
+            <tr class="text-foreground">
+              <td class="w-2/6 whitespace-nowrap p-2 text-base font-semibold sm:pl-0">
                 {firstColumnLabel}
               </td>
-              <td class="whitespace-nowrap py-2 text-sm font-[600]">Description</td>
+              <td class="w-4/6 whitespace-nowrap p-2 text-base font-semibold sm:pl-0">
+                Description
+              </td>
             </tr>
             {propDescriptors?.map((propDescriptor) => {
               return (
                 <tr key={propDescriptor.name}>
                   <td class="align-center py-3 pl-2 pr-2 sm:pl-0 md:align-baseline">
-                    <code class="border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 mr-6 rounded-md rounded-md border-[1px] border-b-[2px] px-2 py-[2px] font-[400] text-slate-950">
+                    <code class="border-primary text-accent-foreground mr-6 rounded border border-b-2">
                       {propDescriptor.name}
                     </code>
                   </td>
                   <td class="py-3 align-baseline">
-                    <div class="prose prose-sm prose-docs-table">
+                    <div class="prose-docs-table">
                       <p>{propDescriptor.description}</p>
                     </div>
                   </td>

apps/website/src/components/api-table/api-table.tsx

@@ -12,41 +12,39 @@ type APITableProps = {
 export const APITable = component$(({ propDescriptors }: APITableProps) => {
   return (
     <div class="overflow-auto">
-      <table class="mb-6 w-full min-w-[540px] border-b border-slate-200 text-left dark:border-slate-800 sm:min-w-full">
-        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
-          <tr class="w-1/4 dark:text-white ">
-            <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">
+      <table class="mb-6 w-full min-w-[540px] border-b text-left sm:min-w-full">
+        <tbody class="divide-y">
+          <tr class="w-1/4">
+            <th class="w-1/6 whitespace-nowrap py-2 pl-4 text-base font-semibold sm:pl-0">
               Prop
             </th>
-            <th class="w-1/6 whitespace-nowrap py-2 text-base font-[600] text-slate-700 dark:text-slate-300">
-              Type
-            </th>
-            <th class="w-2/3 whitespace-nowrap p-2 text-base font-[600] text-slate-700 dark:text-slate-300">
+            <th class="w-1/6 whitespace-nowrap py-2 text-base font-semibold">Type</th>
+            <th class="w-2/3 whitespace-nowrap p-2 text-base font-semibold">
               Description
             </th>
           </tr>
           {propDescriptors?.map((propDescriptor) => {
             return (
               <tr key={propDescriptor.name}>
                 <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">
+                  <code class="border-primary mr-6 rounded-md border border-b-[2px]">
                     {propDescriptor.name}
                   </code>
                 </td>
                 <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">
+                    <code class="rounded-md border border-b-2 px-2">
                       {propDescriptor.type}
                     </code>
                     {propDescriptor.info && (
                       <Popover placement="top">
                         <PopoverContent>
-                          <div class="shadow-light-medium bg-qwikui-blue-50 dark:shadow-dark-high text-md  border-qwikui-blue-500 dark:border-qwikui-purple-500 dark:bg-qwikui-purple-100 mb-2 max-w-xs  rounded-lg border-[1px] border-b-2 px-3 py-2 font-[500] text-slate-950 sm:w-max">
+                          <div class="shadow-light-medium dark:shadow-dark-high bg-background text-md mb-2 max-w-xs rounded-lg border border-b-2 px-3 py-2 font-medium sm:w-max">
                             {propDescriptor?.info}
                           </div>
                         </PopoverContent>
                         <PopoverTrigger>
-                          <div class="mx-2 mt-2 rounded-md rounded-xl p-1 hover:bg-slate-500 hover:bg-opacity-50">
+                          <div class="mx-2 mt-2 rounded-xl p-1">
                             <svg
                               width="15"
                               height="15"
@@ -63,7 +61,7 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
                                 clip-rule="evenodd"
                               ></path>
                             </svg>
-                          </div>{' '}
+                          </div>
                         </PopoverTrigger>
                       </Popover>
                     )}

apps/website/src/components/code-copy/code-copy.tsx

@@ -7,11 +7,10 @@ import { twMerge } from 'tailwind-merge';
 
 export type CodeCopyProps = OmitSignalClass<QwikIntrinsicElements['button']> & {
   code?: string;
-  icon?: boolean;
 };
 
 export const CodeCopy = component$(
-  ({ icon = false, code = '', class: outsideClass, ...restOfProps }: CodeCopyProps) => {
+  ({ code = '', class: outsideClass, ...restOfProps }: CodeCopyProps) => {
     const copied = useSignal(false);
 
     return (
@@ -31,8 +30,7 @@ export const CodeCopy = component$(
           }, 4000);
         }}
       >
-        {!icon && (!copied.value ? 'Copy' : 'Copied!')}
-        {icon && (!copied.value ? <CopyIcon /> : <ClipboardCheck />)}
+        {!copied.value ? <CopyIcon /> : <ClipboardCheck />}
       </Button>
     );
   },

apps/website/src/components/code-snippet/code-snippet.tsx

@@ -34,7 +34,7 @@ export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
   });
 
   return (
-    <div class="shadow-3xl shadow-light-medium dark:shadow-dark-medium mx-[-24px] mb-6 rounded-xl border-2 border-slate-200 dark:border-slate-400 lg:mx-[-32px]">
+    <div class="shadow-3xl shadow-light-medium dark:shadow-dark-medium -mx-6 mb-6 rounded-xl border lg:-mx-8">
       <Highlight code={codeSnippetSig.value || ''} />
     </div>
   );

apps/website/src/components/component-status-badge/component-status-badge.tsx

@@ -12,11 +12,11 @@ export function getClassByStatus(status: ComponentStatus) {
     case ComponentStatus.Ready:
       return 'text-green-900 bg-green-300 tracking-wide';
     case ComponentStatus.Beta:
-      return 'dark:text-slate-100 dark:bg-qwikui-purple-600 bg-qwikui-blue-600 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-beta';
+      return 'border border-primary-foreground tracking-wide bg-primary text-primary-foreground';
     case ComponentStatus.Draft:
-      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';
+      return 'border tracking-wide bg-muted text-foreground';
     case ComponentStatus.Planned:
-      return 'text-white bg-slate-400 dark:bg-slate-600 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned dark:text-outline-none';
+      return 'text-white bg-slate-600 dark:bg-slate-500 border tracking-wide';
     default:
       return null;
   }
@@ -26,7 +26,7 @@ export const StatusBadge = component$<StatusBadgeProps>(({ status }) => {
   return (
     <Badge
       title={tooltipByStatus[status]}
-      class={`rounded-lg p-3 text-lg font-medium leading-3 lg:px-2 lg:py-1 lg:text-xs 
+      class={`rounded-lg p-3 text-lg font-bold leading-3 shadow lg:px-2 lg:py-1 lg:text-xs
       ${getClassByStatus(status)}`}
     >
       {status}

apps/website/src/components/footer/footer.tsx

@@ -4,22 +4,16 @@ import { DiscordIcon } from '../icons/discord';
 
 export const Footer = component$(() => {
   return (
-    <footer class="border-t-[1px] border-slate-100 border-slate-300 bg-slate-50 dark:border-slate-800 dark:bg-slate-950">
+    <footer class="border-t">
       <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-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
-            >
+            <a href="/about" class="hover:text-muted-foreground">
               About
             </a>
           </div>
           <div class="px-5 py-2">
-            <a
-              href="/docs/headless/introduction"
-              class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
-            >
+            <a href="/docs/headless/introduction" class="hover:text-muted-foreground">
               Headless Kit
             </a>
           </div>
@@ -28,7 +22,7 @@ export const Footer = component$(() => {
             <a
               href="https://discord.gg/PVWUUejrez"
               target="_blank"
-              class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
+              class="hover:text-muted-foreground"
             >
               Community
             </a>
@@ -38,7 +32,7 @@ export const Footer = component$(() => {
             <a
               href="https://www.w3.org/standards/webdesign/accessibility"
               target="_blank"
-              class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
+              class="hover:text-muted-foreground"
             >
               Accessibility
             </a>
@@ -47,7 +41,7 @@ export const Footer = component$(() => {
             <a
               href="https://qwik.builder.io/docs"
               target="_blank"
-              class="text-base text-slate-800 hover:text-slate-900 dark:text-white dark:hover:text-slate-300"
+              class="hover:text-muted-foreground"
             >
               Qwik Documentation
             </a>
@@ -58,22 +52,20 @@ export const Footer = component$(() => {
             target="_blank"
             href="https://github.com/qwikifiers/qwik-ui"
             aria-label="Qwik-UI GitHub repository"
-            class="text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white"
+            class="hover:text-accent-foreground text-muted-foreground"
           >
             <GitHubIcon />
           </a>
           <a
             target="_blank"
             href="https://discord.gg/PVWUUejrez"
             aria-label="Qwik-UI Discord server"
-            class="text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white"
+            class="hover:text-accent-foreground text-muted-foreground"
           >
             <DiscordIcon />
           </a>
         </div>
-        <p class="mt-8 text-center text-base text-slate-600 dark:text-slate-400">
-          &copy; 2023 Qwik UI. All rights reserved.
-        </p>
+        <p class="mt-8 text-center">&copy; 2023 Qwik UI. All rights reserved.</p>
       </div>
     </footer>
   );

apps/website/src/components/header/header.tsx

@@ -27,18 +27,14 @@ export default component$(
 
     const isRouteActive = (href: string) => {
       const isLinkActive = location.url.pathname.startsWith(href);
-      return `text-slate-600 dark:text-slate-400 hover:text-slate-950 focus:text-slate-950 dark:hover:text-white dark:focus:text-white
-        transition-color ease-step duration-300 ${
-          isLinkActive ? 'font-bold !text-slate-950 dark:!text-white' : ''
-        }`;
+      return `
+        transition-color ease-step duration-300 ${isLinkActive ? 'font-bold' : ''}`;
     };
 
     const isDocsActive = (baseHref: string) => {
       const isLinkActive = location.url.pathname.startsWith(baseHref);
-      return `text-slate-600 dark:text-slate-400 hover:text-slate-950 focus:text-slate-950 dark:hover:text-white dark:focus:text-white
-        transition-color ease-step duration-300 ${
-          isLinkActive ? 'font-bold !text-slate-950 dark:!text-white' : ''
-        }`;
+      return `
+        transition-color ease-step duration-300 ${isLinkActive ? 'font-bold' : ''}`;
     };
 
     const kitSignal = useComputed$(() => {
@@ -60,15 +56,12 @@ 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={[
-          `xs:gap-8 sticky top-0 z-20 flex h-20 w-full items-center gap-6 border-b-[1px] border-slate-200 bg-white  p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
+          `bg-background xs:gap-8 sticky top-0 z-20 flex h-20 w-full items-center gap-6 border-b-[1px] p-4 md:h-20`,
           `shadow-light-low dark:shadow-dark-medium`,
-          rootStore.isSidebarOpened
-            ? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
-            : 'bg-[var(--color-bg)]',
+          rootStore.isSidebarOpened ? '' : 'bg-[var(--color-bg)]',
           showBottomBorder ? `shadow-light-low dark:shadow-dark-medium` : ``,
         ]}
       >

apps/website/src/components/highlight/highlight.tsx

@@ -58,15 +58,15 @@ export const Highlight = component$(
       <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',
+            'absolute right-4 top-4 text-white hover:bg-slate-800 hover:text-white',
             copyCodeClass,
           ]}
           code={code}
         />
         <div
           {...props}
           class={[
-            'tab-size max-h-[31.25rem] max-w-full overflow-auto rounded-xl bg-slate-800 p-6 text-sm dark:bg-slate-900',
+            'tab-size max-h-[31.25rem] max-w-full overflow-auto rounded-xl bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm',
             props.class,
           ]}
         >

apps/website/src/components/icons/MoonIcon.tsx

@@ -3,7 +3,7 @@ export const MoonIcon = () => (
     viewBox="0 0 20 20"
     fill="none"
     aria-hidden="true"
-    class="h-10 w-10 rounded-xl stroke-white p-1 hover:bg-slate-600"
+    class="hover:bg-accent h-10 w-10 rounded-xl stroke-white p-1"
   >
     <path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" />
   </svg>

apps/website/src/components/icons/SunIcon.tsx

@@ -3,7 +3,7 @@ export const SunIcon = () => (
     viewBox="0 0 20 20"
     fill="none"
     aria-hidden="true"
-    class="h-10 w-10 rounded-xl stroke-black p-1 hover:bg-gray-100"
+    class="hover:bg-accent h-10 w-10 rounded-xl stroke-black p-1"
   >
     <path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
     <path