feat(docs): show comparative example color uses in ui-docs

front/ui-docs/using-color.md

@@ -1,11 +1,16 @@
 <script setup>
 import { color } from "~/composables/colors.ts"
+import { useRoute } from "vue-router"
+
 import Button from "~/components/ui/Button.vue"
 import Card from "~/components/ui/Card.vue"
 import Link from "~/components/ui/Link.vue"
 import Layout from "~/components/ui/Layout.vue"
 import Alert from "~/components/ui/Alert.vue"
 import Spacer from "~/components/ui/layout/Spacer.vue"
+
+const route = useRoute();
+const here = route.path
 </script>
 
 <Link disabled to="#theme-color-definitions">Want to fix colors?</Link>
@@ -570,6 +575,199 @@ For example, you want to add visible lines around ghost links and buttons when t
 - In our example, we would add the line `border-color: var(--hover-border-color);` under `&:hover` to make the outline on interactive items visible on hover.
 - Make sure to test all affected components before committing and merging the changes
 
+## Overview of current styles
+
+Make sure that:
+
+- Contrasts meet WCAG2 requirements
+- Colors and outlines communicate the correct dose of prominence
+- All styles are different enough from each other to not be confused
+
+Here is the meaning the styles should convey:
+
+- **active**: The user has chosen this option
+- **Here**: The user is exactly here
+- **raised**: Things on this surface complement the main area (sidebar, aside, ...)
+- **default**: Background of the app
+- **secondary**: This is interactive! As of now, secondary things need a secondary background.
+- **primary**: Important!
+
+### Links and buttons
+
+---
+
+<Layout flex>
+
+<Card small title="Default" solid default>
+  <span>
+    Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
+  </span>
+
+---
+
+  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout no-gap>
+      Here
+      <Link ghost :to="here"> ghost </Link>
+      <Link outline :to="here"> outline </Link>
+      <Link solid raised :to="here"> solid raised </Link>
+    </Layout>
+    <Layout no-gap>
+      Elsewhere
+      <Link ghost to="-"> ghost </Link>
+      <Link outline to="-"> outline </Link>
+      <Link solid raised to="-"> solid raised </Link>
+    </Layout>
+  </Layout>
+
+---
+
+<Button> Button </Button>
+<Button ghost> Button ghost </Button>
+<Button outline> Button outline </Button>
+<Button solid> Button solid </Button>
+<Button solid aria-pressed="true"> Button active </Button>
+<Button disabled> Button disabled </Button>
+<Button primary> Button primary </Button>
+
+---
+
+<Button raised> Button raised </Button>
+<Button raised ghost> Button raised ghost </Button>
+<Button raised outline> Button raised outline </Button>
+<Button raised solid> Button raised solid </Button>
+<Button raised aria-pressed="true"> Button active </Button>
+<Button raised disabled> Button disabled </Button>
+</Card>
+
+<Card small title="Default raised" solid default raised>
+  <span>
+    Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
+  </span>
+
+---
+
+  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout no-gap>
+      Here
+      <Link ghost :to="here"> ghost </Link>
+      <Link outline :to="here"> outline </Link>
+      <Link solid raised :to="here"> solid raised </Link>
+    </Layout>
+    <Layout no-gap>
+      Elsewhere
+      <Link ghost to="-"> ghost </Link>
+      <Link outline to="-"> outline </Link>
+      <Link raised to="-"> solid raised </Link>
+    </Layout>
+  </Layout>
+
+---
+
+<Button> Button </Button>
+<Button ghost> Button ghost </Button>
+<Button outline> Button outline </Button>
+<Button solid> Button solid </Button>
+<Button aria-pressed="true"> Button active </Button>
+<Button disabled> Button disabled </Button>
+<Button primary> Button primary </Button>
+
+---
+
+<Button raised> Button raised </Button>
+<Button raised ghost> Button raised ghost </Button>
+<Button raised outline> Button raised outline </Button>
+<Button raised solid> Button raised solid </Button>
+<Button raised aria-pressed="true"> Button active </Button>
+<Button raised disabled> Button disabled </Button>
+</Card>
+
+<Card small title="Secondary" solid secondary>
+  <span>
+    Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
+  </span>
+
+---
+
+  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout no-gap>
+      Here
+      <Link ghost :to="here"> ghost </Link>
+      <Link outline :to="here"> outline </Link>
+      <Link solid raised :to="here"> solid raised </Link>
+    </Layout>
+    <Layout no-gap>
+      Elsewhere
+      <Link ghost to="-"> ghost </Link>
+      <Link outline to="-"> outline </Link>
+      <Link solid raised to="-"> solid raised </Link>
+    </Layout>
+  </Layout>
+
+---
+
+<Button> Button </Button>
+<Button ghost> Button ghost </Button>
+<Button outline> Button outline </Button>
+<Button solid> Button solid </Button>
+<Button aria-pressed="true"> Button active </Button>
+<Button disabled> Button disabled </Button>
+<Button primary> Button primary </Button>
+
+---
+
+<Button raised> Button raised </Button>
+<Button raised ghost> Button raised ghost </Button>
+<Button raised outline> Button raised outline </Button>
+<Button raised solid> Button raised solid </Button>
+<Button raised aria-pressed="true"> Button raised active </Button>
+<Button raised disabled> Button raised disabled </Button>
+</Card>
+
+<Card small title="Secondary raised" solid secondary raised>
+  <span>
+    Inline <Link to=""> Link </Link> and <Link to=""> Link </Link>
+  </span>
+
+---
+
+  <Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
+    <Layout no-gap>
+      Here
+      <Link ghost :to="here"> ghost </Link>
+      <Link outline :to="here"> outline </Link>
+      <Link solid raised :to="here"> solid raised </Link>
+    </Layout>
+    <Layout no-gap>
+      Elsewhere
+      <Link ghost to="-"> ghost </Link>
+      <Link outline to="-"> outline </Link>
+      <Link solid raised to="-"> solid raised </Link>
+    </Layout>
+  </Layout>
+
+---
+
+<Button> Button </Button>
+<Button ghost> Button ghost </Button>
+<Button outline> Button outline </Button>
+<Button solid> Button solid </Button>
+<Button solid aria-pressed="true"> Button active </Button>
+<Button disabled> Button disabled </Button>
+<Button primary> Button primary </Button>
+
+---
+
+<Button raised> Button raised </Button>
+<Button raised ghost> Button raised ghost </Button>
+<Button raised outline> Button raised outline </Button>
+<Button raised solid> Button raised solid </Button>
+<Button raised aria-pressed="true"> Button active </Button>
+<Button raised disabled> Button raised disabled </Button>
+</Card>
+
+</Layout>
+
 <style module>
     .swatch {
       transition:all .15s, filter 0s;