Begin to update the docs for theme / dark mode

techniq · Dec 12, 2023 · 09c31d7 · 09c31d7
1 parent c27b1f8
commit 09c31d7
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 50 deletions.
diff --git a/packages/layerchart/src/lib/docs/Code.svelte b/packages/layerchart/src/lib/docs/Code.svelte
@@ -1,24 +1,38 @@
 <script lang="ts">
   import Prism from 'prismjs';
   import 'prism-svelte';
-  import { CopyButton, cls } from 'svelte-ux';
+  import { CopyButton, cls, getComponentTheme } from 'svelte-ux';
 
   export let source: string | null = null;
   export let language = 'svelte';
   export let highlightedSource = source
-    ? Prism.highlight(source, Prism.languages[language], language)
+    ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
     : '';
+
+  export let classes: {
+    root?: string;
+    pre?: string;
+    code?: string;
+  } = {};
+
+  const theme = getComponentTheme('Code');
 </script>
 
-<div class={cls('rounded', $$restProps.class)}>
+<div class={cls('Code', 'rounded', theme.root, classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
-      <pre class="language-{language} rounded" style="margin: 0; white-space: normal;">
-        <code class="language-{language}">{@html highlightedSource}</code>
+      <pre
+        class={cls('language-{language} rounded', classes.pre)}
+        style="margin: 0; white-space: normal;">
+          <code class={cls('language-{language}', classes.code)}>{@html highlightedSource}</code>
       </pre>
 
-      <div class="absolute top-0 right-0 p-2">
-        <CopyButton value={source} class="text-white/70 hover:bg-white/20 py-1" size="sm" />
+      <div class="absolute top-0 right-0 p-2 z-10">
+        <CopyButton
+          value={source ?? ''}
+          class="text-white/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
+          size="sm"
+        />
       </div>
     </div>
   {/if}

diff --git a/packages/layerchart/src/lib/docs/Preview.svelte b/packages/layerchart/src/lib/docs/Preview.svelte
@@ -5,8 +5,9 @@
   import 'prism-svelte';
   import { mdiCodeTags, mdiTable } from '@mdi/js';
 
-  import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
+  import { Button, CopyButton, Dialog, Toggle, Tooltip, cls } from 'svelte-ux';
 
+  import Code from './Code.svelte';
   import Json from './Json.svelte';
 
   export let code: string | undefined = undefined;
@@ -24,30 +25,25 @@
   }
 </script>
 
-<div class="border border-black/20 rounded bg-white">
+<div class={cls('Preview border rounded bg-surface-100', $$props.class)}>
   <div class="p-4">
     <slot />
   </div>
 
   {#if code && showCode}
-    <div class="relative">
-      <pre
-        class="language-{language} rounded"
-        style="margin: 0; white-space: normal;"
-        transition:slide|local>
-          <code class="language-{language}">{@html highlightedCode}</code>
-      </pre>
-
-      <div class="absolute top-0 right-0 p-2">
-        <CopyButton value={code} class="text-white/70 hover:bg-white/20 py-1" size="sm" />
-      </div>
+    <div transition:slide class="bg-surface-200">
+      <Code source={code} highlightedSource={highlightedCode} classes={{ pre: 'rounded-t-none' }} />
     </div>
   {/if}
 </div>
 
 {#if code}
-  <Button icon={mdiCodeTags} class=" text-black/60 py-1" on:click={() => (showCode = !showCode)}>
-    {showCode ? 'Hide' : 'Show'} code
+  <Button
+    icon={mdiCodeTags}
+    class=" text-surface-content/70 py-1"
+    on:click={() => (showCode = !showCode)}
+  >
+    {showCode ? 'Hide' : 'Show'} Code
   </Button>
 {/if}
 

diff --git a/packages/layerchart/src/routes/+page.md b/packages/layerchart/src/routes/+page.md
@@ -1,4 +1,4 @@
-<div class="prose max-w-none bg-white p-3 px-5 m-2 rounded shadow-lg border">
+<div class="prose max-w-none bg-surface-100 p-3 px-5 m-2 rounded shadow-lg border">
 
 <h1>Welcome to LayerChart</h1>
 
@@ -22,7 +22,7 @@ The library accomplishes this through a large assortment of components:
 - Legends, annotations, and many more!
 
 ## Getting Started
-Take a look at the various examples to understand the capabilities and go to [Getting Started](/getting-started) to install it for yourself.
 
+Take a look at the various examples to understand the capabilities and go to [Getting Started](/getting-started) to install it for yourself.
 
 </div>
diff --git a/packages/layerchart/src/routes/changelog/+page.svelte b/packages/layerchart/src/routes/changelog/+page.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div class="grid grid-cols-[1fr,auto] gap-6 pt-2 pb-4">
-  <div class="prose max-w-none px-4 bg-white p-2 m-2 rounded shadow-lg border overflow-auto">
+  <div class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded shadow-lg border overflow-auto">
     {@html marked.parse(sanitize(changelog))}
   </div>
 

diff --git a/packages/layerchart/src/routes/docs/+layout.svelte b/packages/layerchart/src/routes/docs/+layout.svelte
@@ -28,8 +28,17 @@
   $: sourceUrl = ['components', 'utils'].includes(type)
     ? `src/lib/${type}/${name}.${type === 'components' ? 'svelte' : 'ts'}`
     : null;
-  $: ({ description, features, related, hideUsage, hideTableOfContents, source, pageSource, api } =
-    $page.data.meta ?? {});
+  $: ({
+    description,
+    features,
+    related,
+    hideUsage,
+    hideTableOfContents,
+    source,
+    pageSource,
+    api,
+    status,
+  } = $page.data.meta ?? {});
 
   $: showTableOfContents = false;
   onMount(() => {
@@ -44,6 +53,8 @@
       } else {
         return { type: 'website', name: url, url };
       }
+    } else if (r.startsWith('/')) {
+      return { type: 'docs', name: toTitleCase(r.slice(1)), url: r };
     } else {
       const [type, name] = r.split('/');
       return { type, name, url: `/docs/${type}/${name}` };
@@ -52,21 +63,34 @@
 </script>
 
 <div
-  class="[@media(min-height:900px)]:sticky top-0 z-20 bg-neutral-200/90 backdrop-blur px-5 py-4 [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)calc(100%-4px),rgba(0,0,0,0))]"
+  class="[@media(min-height:900px)]:sticky top-0 z-20 bg-surface-200/90 backdrop-blur px-5 py-4 [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)calc(100%-4px),rgba(0,0,0,0))]"
 >
   {#if title}
     <div>
-      <div class="inline-block text-xs font-bold text-gray-500 capitalize">Docs</div>
+      <div class="inline-block text-xs font-bold text-surface-content/50 capitalize">Docs</div>
       <Icon path={mdiChevronRight} class="divider opacity-25" />
-      <div class="inline-block text-xs font-bold text-accent-500 capitalize">
+      <div class="inline-block text-xs font-bold text-primary capitalize">
         {type}
       </div>
     </div>
 
-    <div class="text-2xl font-bold">{title}</div>
+    <div class="text-2xl font-bold">
+      {title}
+      {#if status}
+        <span
+          class={cls(
+            'text-sm  px-2 rounded',
+            status === 'beta' && 'bg-yellow-500/20 text-yellow-800',
+            status === 'deprecated' && 'bg-red-500/20 text-red-900'
+          )}
+        >
+          {status}
+        </span>
+      {/if}
+    </div>
 
     {#if description}
-      <div class="text-sm text-black/60">
+      <div class="text-sm text-surface-content/60">
         {description}
       </div>
     {/if}
@@ -109,9 +133,9 @@
 
 <div class="px-4">
   {#if showTableOfContents && !$xlScreen}
-    <div transition:fade|local class="mt-3">
+    <div transition:fade class="mt-3">
       {#key $page.route.id}
-        <TableOfContents />
+        <TableOfContents class="text-surface-content" />
       {/key}
     </div>
   {/if}
@@ -133,7 +157,7 @@
               <ListItem
                 title={feature.description}
                 icon={mdiCheck}
-                avatar={{ size: 'sm', class: 'text-xs text-white bg-emerald-600' }}
+                avatar={{ size: 'sm', class: 'text-xs text-white bg-success' }}
                 classes={{ root: feature.depth && 'pl-12', title: 'text-sm' }}
               />
             {/each}
@@ -150,7 +174,7 @@
             <div>
               <h2
                 id="related-{type}"
-                class="text-xs uppercase leading-8 tracking-widest text-black/50"
+                class="text-xs uppercase leading-8 tracking-widest text-surface-content/50"
               >
                 {type}
               </h2>
@@ -169,7 +193,7 @@
                   <ListItem
                     title={item.name}
                     {icon}
-                    avatar={{ size: 'sm', class: 'text-xs text-white bg-accent-500' }}
+                    avatar={{ size: 'sm', class: 'text-xs text-white bg-primary' }}
                     on:click={() => {
                       if (item.url instanceof URL) {
                         // open in new window
@@ -179,10 +203,10 @@
                         goto(item.url);
                       }
                     }}
-                    class="hover:bg-accent-50 cursor-pointer"
+                    class="hover:bg-surface-200 cursor-pointer"
                   >
                     <div slot="actions">
-                      <Icon data={mdiChevronRight} class="text-black/50" />
+                      <Icon data={mdiChevronRight} class="text-surface-content/50" />
                     </div>
                   </ListItem>
                 {/each}
@@ -199,12 +223,14 @@
     </div>
 
     {#if showTableOfContents && $xlScreen}
-      <div transition:slide|local={{ axis: 'x' }}>
-        <div class="w-[224px] sticky top-[16px] pr-2 max-h-[calc(100vh-64px)] overflow-auto z-20">
-          <div class="text-xs uppercase leading-8 tracking-widest text-black/50">On this page</div>
+      <div transition:slide={{ axis: 'x' }}>
+        <div class="w-[224px] sticky top-[16px] pr-2 max-h-[calc(100dvh-64px)] overflow-auto z-20">
+          <div class="text-xs uppercase leading-8 tracking-widest text-surface-content/50">
+            On this page
+          </div>
           <!-- Rebuild toc when page changes -->
           {#key $page.route.id}
-            <TableOfContents />
+            <TableOfContents class="text-surface-content" />
           {/key}
         </div>
       </div>

diff --git a/packages/layerchart/src/routes/docs/components/Text/+page.svelte b/packages/layerchart/src/routes/docs/components/Text/+page.svelte
@@ -61,8 +61,8 @@
   </div>
 </div>
 
-<div class="flex items-center justify-center bg-white p-4">
-  <svg width={resizeSvg ? width : 300} class="h-56 border">
+<div class="flex items-center justify-center bg-surface-100 p-4">
+  <svg width={resizeSvg ? width : 300} class="h-56 border border-surface-content/10">
     <Text
       {value}
       {x}

diff --git a/packages/layerchart/src/routes/docs/examples/GeojsonPreview/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeojsonPreview/+page.svelte
@@ -69,7 +69,7 @@
   </div>
 
   {#if geojson}
-    <div class="h-[600px] bg-white/50 border border-gray-400 rounded-lg overflow-hidden">
+    <div class="h-[600px] bg-surface-100/50 border rounded-lg overflow-hidden">
       <Chart
         geo={{
           projection,

diff --git a/packages/layerchart/src/routes/getting-started/+layout.svelte b/packages/layerchart/src/routes/getting-started/+layout.svelte
@@ -3,14 +3,16 @@
 </script>
 
 <div class="grid grid-cols-[1fr,auto] gap-6 pt-2 pb-4">
-  <div class="prose max-w-none px-4 bg-white p-2 m-2 rounded shadow-lg border overflow-auto">
-    <slot></slot>
+  <div class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded shadow-lg border overflow-auto">
+    <slot />
   </div>
 
   <div class="hidden lg:block w-[224px]">
     <div class="sticky top-0 pr-2 max-h-[calc(100vh-64px)] overflow-auto">
-      <div class="text-xs uppercase leading-8 tracking-widest text-black/50">On this page</div>
-      <TableOfContents maxDepth={2} />
+      <div class="text-xs uppercase leading-8 tracking-widest text-surface-content">
+        On this page
+      </div>
+      <TableOfContents maxDepth={2} class="text-surface-content" />
     </div>
   </div>
 </div>