docs(showcase): implement UX feedback

apps/showcase/app/components/content/TypographyCard.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import { isInternalLink, type SharedLinkProps } from "sit-onyx";
 import type { DetailsItem } from "../DetailsList.vue";
 
 const props = defineProps<{
   items?: DetailsItem[];
+  link?: string | SharedLinkProps;
 }>();
 
 defineSlots<{
@@ -11,10 +13,16 @@ defineSlots<{
    */
   default(): unknown;
 }>();
+
+const normalizedLink = computed<SharedLinkProps | undefined>(() => {
+  if (!props.link) return;
+  const link: SharedLinkProps = typeof props.link === "string" ? { href: props.link } : props.link;
+  return { target: isInternalLink(link.href) ? undefined : "_blank", ...link };
+});
 </script>
 
 <template>
-  <OnyxCard class="card onyx-grid-span-4">
+  <OnyxCard class="card onyx-grid-span-4" :link="normalizedLink">
     <div class="card__preview">
       <slot></slot>
     </div>

apps/showcase/content/en/introduction/02.foundation/01.colors.md

@@ -478,8 +478,6 @@ Quantitative colors maximize legibility and ensure that complex datasets remain
 
 </steps>
 
-:color-palette{color="quantitatives"}
-
 <color-palette>
 <color-palette-item css-variable="var(--onyx-color-base-quantitatives-100)">100</color-palette-item>
 <color-palette-item css-variable="var(--onyx-color-base-quantitatives-200)">200</color-palette-item>

apps/showcase/content/en/introduction/02.foundation/02.typography.md

@@ -5,7 +5,7 @@ description: Typography is the heart of our user interface—it’s the voice of
 
 ## Font families
 
-Our design system utilizes only two different font families to avoid "font fatigue": One sans-serif and a monospace font family. We achieve contrast through strategic variations in font weight and size rather than mixing multiple font families.
+Our design system utilizes only a few different font families to avoid "font fatigue": One sans-serif and a monospace font family. We achieve contrast through strategic variations in font weight and size rather than mixing multiple font families.
 
 By default, the following Open Source and free typefaces are used, specifically optimized for legibility on digital displays:
 
@@ -74,7 +74,9 @@ class: onyx-grid-span-4
 brand: prezero
 items:
   - label: Default
-    value: Helsinki
+    value: Barlow
+  - label: Headlines
+    value: Barlow Semi Condensed
   - label: Monospace
     value: Source Code Pro
 ---
@@ -147,6 +149,7 @@ The headline styles `h5` and `h6` are only supported for technical semantic reas
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-headline--docs
   items:
     - label: Level
       value: h1
@@ -157,6 +160,7 @@ The headline styles `h5` and `h6` are only supported for technical semantic reas
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-headline--docs
   items:
     - label: Level
       value: h2
@@ -167,6 +171,7 @@ The headline styles `h5` and `h6` are only supported for technical semantic reas
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-headline--docs
   items:
     - label: Level
       value: h3
@@ -177,6 +182,7 @@ The headline styles `h5` and `h6` are only supported for technical semantic reas
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-headline--docs
   items:
     - label: Level
       value: h4
@@ -187,6 +193,7 @@ The headline styles `h5` and `h6` are only supported for technical semantic reas
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-headline--docs
   items:
     - label: Level
       value: h5
@@ -197,6 +204,7 @@ The headline styles `h5` and `h6` are only supported for technical semantic reas
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-headline--docs
   items:
     - label: Level
       value: h6
@@ -220,22 +228,24 @@ Use our [OnyxLink](https://storybook.onyx.schwarz/?path=/docs/navigation-link--d
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-link--docs
   items:
     - label: Target
       value: internal
   ---
 
-  <onyx-link href="#">Hello World</onyx-link>
+  <onyx-link href="https://storybook.onyx.schwarz/?path=/docs/navigation-link--docs">Hello World</onyx-link>
   ::
 
   ::typography-card
   ---
+  link: https://storybook.onyx.schwarz/?path=/docs/navigation-link--docs
   items:
     - label: Target
       value: external
   ---
 
-  <onyx-link href="#" with-external-icon>Hello World</onyx-link>
+  <onyx-link href="https://storybook.onyx.schwarz/?path=/docs/navigation-link--docs" with-external-icon>Hello World</onyx-link>
   ::
 
 </div>