feat: add Link component with hover and active states

2026-06-04 12:49:20 +02:00
parent 5600107e53
commit feebe17abf
4 changed files with 56 additions and 1 deletions
@@ -0,0 +1,30 @@
+@use '../../styles/tokens/typography' as *;
+
+.link { 
+  text-decoration: none;
+  color: var(--nds-primary);
+  @include text-base;
+    &:hover {
+        color: var(--nds-text);
+        opacity: 0.25;
+    }
+    &:active {
+        color: var(--nds-text);
+        opacity: 0.25;
+    }
+  &__container {
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
+    &:hover {
+      background-color: var(--nds-secondary);
+      border-bottom: var(--nds-border-width-medium) dashed var(--nds-accent);
+    }
+    &:active {
+      background-color: var(--nds-primary);
+      border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
+    }
+  }
+}