From f18fb94e1ffb0d393d8aaa469e35210e3269eafa Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Thu, 24 Apr 2025 16:42:12 +0200
Subject: [PATCH] feat: add top task link tokens

---
 components/toptask-link/src/index.scss        | 31 +++++++++++++++++++
 .../src/components/top-task-link.tsx          |  7 ++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/components/toptask-link/src/index.scss b/components/toptask-link/src/index.scss
index 11fe50d2321..7b0f6ab5b48 100644
--- a/components/toptask-link/src/index.scss
+++ b/components/toptask-link/src/index.scss
@@ -11,6 +11,9 @@
   --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
 
   background-color: var(--utrecht-toptask-link-background-color);
+  border-color: var(--utrecht-toptask-link-border-color, currentColor);
+  border-width: var(--utrecht-toptask-link-border-width, 0);
+  box-sizing: border-box;
   color: var(--utrecht-toptask-link-color);
   display: flex;
   flex-direction: column;
@@ -29,6 +32,7 @@
 .utrecht-toptask-link--hover,
 .utrecht-toptask-link:hover {
   background-color: var(--utrecht-toptask-link-hover-background-color, var(--utrecht-toptask-link-background-color));
+  border-color: var(--utrecht-toptask-link-hover-border-color, var(--utrecht-toptask-link-border-color));
   color: var(--utrecht-toptask-link-hover-color, var(--utrecht-toptask-link-color));
   transform: var(--utrecht-toptask-link-hover-transform-scale, 1);
 }
@@ -40,6 +44,7 @@
 
 .utrecht-toptask-link--focus {
   background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
+  border-color: var(--utrecht-toptask-link-focus-border-color, var(--utrecht-toptask-link-border-color));
   color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
 }
 
@@ -51,8 +56,34 @@
   @extend .utrecht-toptask-link--focus;
 }
 
+/* `utrecht-toptask-link__title` is deprecated */
+.utrecht-toptask-link__label,
 .utrecht-toptask-link__title {
   display: block;
+  font-size: var(--utrecht-toptask-link-label-font-size);
+  font-weight: var(--utrecht-toptask-link-label-font-weight);
+  line-height: var(--utrecht-toptask-link-label-line-height);
+  text-decoration-line: var(--utrecht-toptask-link-label-text-decoration-line);
+  text-decoration-thickness: var(--utrecht-toptask-link-label-text-decoration-thickness);
+}
+
+.utrecht-toptask-link__label--hover,
+.utrecht-toptask-link:hover .utrecht-toptask-link__label {
+  text-decoration-line: var(
+    --utrecht-toptask-link-label-hover-text-decoration-line,
+    var(--utrecht-toptask-link-label-text-decoration-line)
+  );
+  text-decoration-thickness: var(
+    --utrecht-toptask-link-label-hover-text-decoration-thickness,
+    var(--utrecht-toptask-link-label-text-decoration-thickness)
+  );
+}
+
+.utrecht-toptask-link__description {
+  display: block;
+  font-size: var(--utrecht-toptask-link-description-font-size);
+  font-weight: var(--utrecht-toptask-link-description-font-weight);
+  line-height: var(--utrecht-toptask-link-description-line-height);
 }
 
 .utrecht-toptask-link__icon {
diff --git a/packages/web-component-library-stencil/src/components/top-task-link.tsx b/packages/web-component-library-stencil/src/components/top-task-link.tsx
index d1e667caf97..d2411e576d7 100644
--- a/packages/web-component-library-stencil/src/components/top-task-link.tsx
+++ b/packages/web-component-library-stencil/src/components/top-task-link.tsx
@@ -22,13 +22,18 @@ export class TopTaskLink {
         href={this.href}
         rel={this.external ? 'external noopener noreferrer' : undefined}
         target={this.target}
+        aria-labelledby="label"
+        aria-describedby="description"
       >
         <span class="utrecht-toptask-link__icon">
           <slot name="icon"></slot>
         </span>
-        <span class="utrecht-toptask-link__title">
+        <span class="utrecht-toptask-link__label" id="label">
           <slot></slot>
         </span>
+        <span class="utrecht-toptask-link__description" id="description">
+          <slot name="description"></slot>
+        </span>
       </a>
     );
   }