refactor(ui-docs): establish navigation subsection; apply more funkwhale colors

front/ui-docs/.vitepress/config.ts

@@ -22,8 +22,10 @@ export default defineConfig({
           { text: 'Alert', link: '/components/ui/alert' },
           { text: 'Card', link: '/components/ui/card' },
           {
-            text: 'Content Navigation',
+            text: 'Navigation',
+            link: '/navigation',
             items: [
+              { text: 'Link', link: 'components/ui/link' },
               { text: 'Pagination', link: '/components/ui/pagination' },
               { text: 'Table of Contents', link: '/components/ui/toc' },
               { text: 'Tabs', link: '/components/ui/tabs' },
@@ -57,11 +59,14 @@ export default defineConfig({
               { text: "Using `columns`", link: "/components/ui/layout/columns" },
             ]
           },
-          { text: 'Link', link: 'components/ui/link' },
           { text: 'Loader', link: '/components/ui/loader' },
           { text: 'Modal', link: '/components/ui/modal' },
-          { text: 'Pill', link: '/components/ui/pill' },
-          { text: 'List of pills', link: '/components/ui/pills' },
+          { text: 'Pill',
+            link: '/components/ui/pill',
+            items: [
+              { text: 'List of pills', link: '/components/ui/pills' }
+            ]
+          },
         ],
       },
     ],

front/ui-docs/.vitepress/theme/Theme.vue

@@ -16,6 +16,14 @@ const { Theme } = DefaultTheme
 }
 
 .Layout {
+  --vp-c-text-1: color-mix(in oklab, light-dark(var(--fw-gray-970), var(--fw-beige-100)) 100%, transparent);
+  --vp-c-text-2: color-mix(in oklab, light-dark(var(--fw-gray-970), var(--fw-beige-100)) 60%, transparent);
+
+  --vp-c-bg: color-mix(in oklab, light-dark(white, var(--fw-gray-950)) 50%, transparent);
+  --vp-c-bg-soft: color-mix(in oklab, light-dark(var(--fw-beige-300), var(--fw-gray-970)) 50%, transparent);
+
+  --vp-c-gutter: light-dark(transparent, var(--fw-gray-970));
+  --vp-local-nav-bg-color: light-dark(transparent, var(--fw-gray-970));
   --vp-code-block-bg: light-dark(var(--fw-beige-200), var(--fw-gray-900));
   --vp-c-bg-alt: light-dark(var(--fw-beige-300), var(--fw-gray-850));
   --vp-c-divider: light-dark(var(--fw-beige-300), var(--fw-gray-850));
@@ -30,10 +38,20 @@ const { Theme } = DefaultTheme
   font-size: 14px;
 }
 
+.vp-doc div[class*="language-"]:has(+h1){
+  width: min-content;
+  float: right;
+  margin: -4px -32px -4px -4px;
+  background: transparent;
+  &>pre {
+    padding-right: 32px;
+  }
+}
+
 .language-template:has(~.preview){
-  flex-grow:1;
-  &~.preview{
-    flex-grow:0;
+  flex-grow: 1;
+  &~.preview {
+    flex-grow: 0;
   }
 }
 

front/ui-docs/designing-pages.md

@@ -24,18 +24,27 @@ The page grid consists of 46px wide tracks, separated by 32px wide gaps. [See ex
 
 Use the [Layout Section component](/components/ui/layout/section) to structure the page into separate sections, each with a heading. Make sure the heading level hierarchy makes sense.
 
+```vue-html
+<Section :alignLeft="alignLeft" small-items h3="My albums" :action="{ text:'Go to library', to:'/' }">
+    <Card small solid yellow title="Album 1" />
+    <Card small solid green title="Album 2" />
+    <Card small solid blue title="Album 3" />
+</Section>
+```
+
+<Spacer :size="32" />
+
 <Section :alignLeft="alignLeft" small-items h3="My albums" :action="{ text:'Go to library', to:'/' }">
     <Card small solid yellow title="Album 1" />
     <Card small solid green title="Album 2" />
     <Card small solid blue title="Album 3" />
 </Section>
 
-Sections and their contentsare automatically aligned to the default grid.
+Sections and their contents are automatically aligned to the default grid.
 
-## Navigation
+---
 
-When most of the screen changes, users perceive it as a page navigation. They will expect the "back" button to bring them to the precious screen. In addition, they may expect the URL to contain the current page for sharing.
-
-This makes a component a "page". In this sense, modals are pages.
-
-Not everything we want to share with the Url replaces most of the screen. What about switching a filter?
+<Card to="navigation"
+    title="Designing user navigation and routes"
+    min-content
+  />

front/ui-docs/index.md

@@ -26,24 +26,24 @@ Check out the design system on our Penpot.
 
 <Layout flex>
 
-<Card to='/using-components'
+<Card default raised to='/using-components'
   title="Using components"
-  style="width:min-content"
+  min-content
   />
 
-<Card to="/using-color"
-  title="Using color"
-  style="width:min-content"
+<Card default raised to="/using-color"
+  title="Adding Color"
+  min-content
   />
 
-<Card to="/using-width"
-  title="Using width"
-  style="width:min-content"
+<Card default raised to="/using-width"
+  title="Setting width and height"
+  min-content
   />
 
-<Card to="/using-alignment"
-  title="Using alignment"
-  style="width:min-content"
+<Card default raised to="/using-alignment"
+  title="Aligning elements"
+  min-content
   />
 
 </Layout>

front/ui-docs/navigation.md

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { type Track, type User } from '~/types'
+
+import Card from '~/components/ui/Card.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Button from '~/components/ui/Button.vue'
+import Activity from '~/components/ui/Activity.vue'
+import Section from '~/components/ui/Section.vue'
+
+const alignLeft = ref(false)
+
+const attributes = computed(() => ({
+  style: alignLeft.value ? 'justify-content: start' : ''
+}))
+</script>
+
+# Navigation
+
+When most of the screen changes, users perceive it as a page navigation. They will expect the "back" button to bring them to the precious screen. In addition, they may expect the URL to contain the current page for sharing.
+
+This makes a component a "page". In this sense, modals are pages.
+
+Not everything we want to share with the Url replaces most of the screen. What about switching a filter?