Merge pull request #1290 from international-labour-organization/fix/l…

…ink-border Link Bottom Border
international-labour-organization · Dec 23, 2024 · 947b055 · 947b055
2 parents 3eb1779 + 068ff8e
commit 947b055
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/.changeset/rude-clocks-learn.md b/.changeset/rude-clocks-learn.md
@@ -0,0 +1,5 @@
+---
+"@ilo-org/styles": patch
+---
+
+updated link decoration color
diff --git a/packages/styles/scss/_mixins.scss b/packages/styles/scss/_mixins.scss
@@ -198,56 +198,66 @@
   text-decoration: underline;
   text-underline-offset: px-to-rem(6px);
   text-decoration-thickness: px-to-rem(1.5px);
+  text-decoration-color: var(--ilo-color-blue);
   padding-bottom: spacing(1);
 
   &:visited {
     background: map-get($color, "link", "background", "visited");
     color: map-get($color, "link", "text", "visited");
+    text-decoration-color: var(--ilo-color-purple);
   }
 
   &:hover {
     background: map-get($color, "link", "background", "hover");
     color: map-get($color, "link", "text", "hover");
     text-decoration-thickness: 3px;
+    text-decoration-color: var(--ilo-color-blue);
   }
 
   &:active {
     background: map-get($color, "link", "background", "active");
     color: map-get($color, "link", "text", "active");
     text-decoration-thickness: 3px;
+    text-decoration-color: var(--ilo-color-blue-dark);
   }
 
   &:focus {
     background: map-get($color, "link", "background", "focus");
     color: map-get($color, "link", "text", "focus");
     text-decoration-thickness: 3px;
+    text-decoration-color: var(--ilo-color-blue-dark);
   }
 
   &--dark {
     background: map-get($color, "link", "background-dark", "default");
     color: map-get($color, "link", "text-dark", "default");
+    text-decoration-color: var(--ilo-color-gray-light);
 
     &:visited {
       background: map-get($color, "link", "background-dark", "visited");
       color: map-get($color, "link", "text-dark", "visited");
+      text-decoration-color: var(--ilo-color-gray-base);
     }
 
     &:hover {
       background: map-get($color, "link", "background-dark", "hover");
       color: map-get($color, "link", "text-dark", "hover");
       text-decoration-thickness: 3px;
+      text-decoration-color: var(--ilo-color-blue);
     }
 
     &:active {
       background: map-get($color, "link", "background-dark", "active");
       color: map-get($color, "link", "text-dark", "active");
       text-decoration-thickness: 3px;
+      text-decoration-color: var(--ilo-color-blue-dark);
     }
 
     &:focus {
       background: map-get($color, "link", "background-dark", "focus");
       color: map-get($color, "link", "text-dark", "focus");
       text-decoration-thickness: 3px;
+      text-decoration-color: var(--ilo-color-blue-dark);
     }
   }