From 77555617fa24a424ff7730e8ef7c4b3d912610af Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Wed, 22 May 2024 17:58:45 +0300
Subject: [PATCH] explorer: Fix Links low contrast

Resolves #1764
---
 .../__snapshots__/Alert.spec.js.snap          | 76 -------------------
 .../__snapshots__/AppAnchor.spec.js.snap      |  2 +-
 .../__snapshots__/BlockDetails.spec.js.snap   |  4 +-
 .../__snapshots__/BlocksCard.spec.js.snap     | 20 ++---
 .../__snapshots__/BlocksList.spec.js.snap     |  2 +-
 .../__snapshots__/BlocksTable.spec.js.snap    | 20 ++---
 .../__snapshots__/Footer.spec.js.snap         |  6 +-
 .../__snapshots__/Navbar.spec.js.snap         |  8 +-
 .../TransactionDetails.spec.js.snap           |  4 +-
 .../TransactionsCard.spec.js.snap             | 20 ++---
 .../TransactionsList.spec.js.snap             |  2 +-
 .../TransactionsTable.spec.js.snap            | 20 ++---
 .../components/app-anchor/AppAnchor.svelte    |  5 +-
 .../lib/components/blocks-list/BlocksList.css |  4 -
 .../components/blocks-table/BlocksTable.css   |  4 -
 explorer/src/lib/components/footer/Footer.css |  1 +
 .../src/lib/components/footer/Footer.svelte   |  2 +
 .../TransactionDetails.css                    |  4 -
 .../transactions-list/TransactionsList.css    |  1 -
 .../transactions-table/TransactionsTable.css  |  4 -
 .../__snapshots__/Anchor.spec.js.snap         |  4 +-
 .../__snapshots__/NavList.spec.js.snap        |  8 +-
 .../src/lib/dusk/components/anchor/Anchor.css | 22 ++++--
 .../lib/dusk/components/anchor/Anchor.svelte  |  9 ++-
 .../lib/dusk/components/nav-list/NavList.css  |  1 -
 .../dusk/components/nav-list/NavList.svelte   |  6 +-
 explorer/src/style/dusk/colors.css            |  3 +
 explorer/src/style/dusk/language.css          |  4 +
 28 files changed, 103 insertions(+), 163 deletions(-)
 delete mode 100644 explorer/src/lib/components/__tests__/__snapshots__/Alert.spec.js.snap

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/Alert.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/Alert.spec.js.snap
deleted file mode 100644
index 7fc84e474e..0000000000
--- a/explorer/src/lib/components/__tests__/__snapshots__/Alert.spec.js.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Alert > should render the \`Alert\` in the error state 1`] = `
-<div
-  class="alert"
->
-  <svg
-    class="dusk-icon dusk-icon--size--large"
-    role="graphics-symbol"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-    />
-  </svg>
-  
-  <!--&lt;Icon&gt;-->
-   
-  <header>
-    <h3>
-      There was an error fetching the data.
-    </h3>
-     
-    <p
-      class="alert__error-message"
-    >
-      error
-    </p>
-  </header>
-   
-  <button
-    class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal dusk-icon-button"
-    type="button"
-  >
-    <svg
-      class="dusk-icon dusk-icon--size--large dusk-button__icon"
-      role="graphics-symbol"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M2 12C2 16.97 6.03 21 11 21C13.39 21 15.68 20.06 17.4 18.4L15.9 16.9C14.63 18.25 12.86 19 11 19C4.76 19 1.64 11.46 6.05 7.05C10.46 2.64 18 5.77 18 12H15L19 16H19.1L23 12H20C20 7.03 15.97 3 11 3C6.03 3 2 7.03 2 12Z"
-      />
-    </svg>
-    
-    <!--&lt;Icon&gt;-->
-     
-    
-  </button>
-  <!--&lt;Button&gt;-->
-</div>
-`;
-
-exports[`Alert > should render the \`Alert\` in the no data state 1`] = `
-<div
-  class="alert"
->
-  <svg
-    class="dusk-icon dusk-icon--size--large"
-    role="graphics-symbol"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
-    />
-  </svg>
-  
-  <!--&lt;Icon&gt;-->
-   
-  <header>
-    <h3>
-      No data to display
-    </h3>
-  </header>
-   
-</div>
-`;
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
index 7831817d37..9aab49960c 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`AppAnchor > should render an \`Anchor\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
 <a
-  class="dusk-anchor foo bar"
+  class="dusk-anchor dusk-anchor--on-surface foo bar"
   href="/some-base-path/setup"
   id="some-id"
 >
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
index 65fd87bc42..a2d10610e5 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -85,7 +85,7 @@ exports[`Block Details > renders the Block Details component 1`] = `
         class="details-list__definition"
       >
         <a
-          class="dusk-anchor block-details__list-anchor"
+          class="dusk-anchor dusk-anchor--on-surface block-details__list-anchor"
           href="/some-base-path/blocks/block?id=07b74b35c2c7cf8f41426cd0870bafa1a2c7adee3fdd876643548096186fc4cb"
         >
           <svg
@@ -106,7 +106,7 @@ exports[`Block Details > renders the Block Details component 1`] = `
         495,868
          
         <a
-          class="dusk-anchor block-details__list-anchor"
+          class="dusk-anchor dusk-anchor--on-surface block-details__list-anchor"
           href="/some-base-path/blocks/block?id=6011556208a85e6001bd01ccbf936486b91318a7f6cbcf7ab810adf6fae34204"
         >
           <svg
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
index 3a4eb921ec..825251259b 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
@@ -87,7 +87,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=9ebf7e785d75bc7c8fdc386f6806ffa0964b19c6f18f56d869274ea046ed0148"
             >
               487,491
@@ -158,7 +158,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=d5d5d211791468e09d3224eb194b9ae89f0ba1ad5dea1e8e458e7a3cb9b01bfa"
             >
               487,490
@@ -229,7 +229,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=07d8c3fedd76afcf108dacc311867062393a39cf34a76d5226c7ec8360017117"
             >
               487,489
@@ -300,7 +300,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=6ffed76cc339260d215219c3e6a710ae8fc0d81f68cfb201b1db1c9c57d9ca4c"
             >
               487,488
@@ -371,7 +371,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=284f14e50099db32bc34fc0cbecc016224100dd461fa4e2e02a60ffc77f7b391"
             >
               487,487
@@ -442,7 +442,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=adb7e41bd1509ee542b782a9ae59d82aec00d7ac0810b0bf6d6a6ea6fb54bced"
             >
               487,486
@@ -513,7 +513,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=b16fa4cac5f70b0b021fb7fc0f5388c6a4ad56d21f5170dea8e2abdfc836462c"
             >
               487,485
@@ -584,7 +584,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=0848155ae84398b4a2424a526d9a9e28befa2fff5e54eb253592df9e62cda572"
             >
               487,484
@@ -655,7 +655,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=e583705447034015672243dc5ec694e673344d3969846d5606cca88e2a6fef9f"
             >
               487,483
@@ -726,7 +726,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor block__link"
+              class="dusk-anchor dusk-anchor--on-surface block__link"
               href="/some-base-path/blocks/block?id=8bc650bb577f6d4a93b41523712f2f2c82911395e871c022dfa56d54c12061bc"
             >
               487,482
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
index 617350d8f0..589eab0364 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap
@@ -31,7 +31,7 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
       class="details-list__definition details-list__definition--table"
     >
       <a
-        class="dusk-anchor block-details__list-link"
+        class="dusk-anchor dusk-anchor--on-surface block-details__list-link"
         href="/some-base-path/blocks/block?id=bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f"
       >
         495,868
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
index 8125f41345..c606a62e90 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/BlocksTable.spec.js.snap
@@ -60,7 +60,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=9ebf7e785d75bc7c8fdc386f6806ffa0964b19c6f18f56d869274ea046ed0148"
           >
             487,491
@@ -131,7 +131,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=d5d5d211791468e09d3224eb194b9ae89f0ba1ad5dea1e8e458e7a3cb9b01bfa"
           >
             487,490
@@ -202,7 +202,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=07d8c3fedd76afcf108dacc311867062393a39cf34a76d5226c7ec8360017117"
           >
             487,489
@@ -273,7 +273,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=6ffed76cc339260d215219c3e6a710ae8fc0d81f68cfb201b1db1c9c57d9ca4c"
           >
             487,488
@@ -344,7 +344,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=284f14e50099db32bc34fc0cbecc016224100dd461fa4e2e02a60ffc77f7b391"
           >
             487,487
@@ -415,7 +415,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=adb7e41bd1509ee542b782a9ae59d82aec00d7ac0810b0bf6d6a6ea6fb54bced"
           >
             487,486
@@ -486,7 +486,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=b16fa4cac5f70b0b021fb7fc0f5388c6a4ad56d21f5170dea8e2abdfc836462c"
           >
             487,485
@@ -557,7 +557,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=0848155ae84398b4a2424a526d9a9e28befa2fff5e54eb253592df9e62cda572"
           >
             487,484
@@ -628,7 +628,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=e583705447034015672243dc5ec694e673344d3969846d5606cca88e2a6fef9f"
           >
             487,483
@@ -699,7 +699,7 @@ exports[`Blocks Table > should render the \`BlocksTable\` component 1`] = `
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor block__link"
+            class="dusk-anchor dusk-anchor--on-surface block__link"
             href="/some-base-path/blocks/block?id=8bc650bb577f6d4a93b41523712f2f2c82911395e871c022dfa56d54c12061bc"
           >
             487,482
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap
index d88edae5bf..bc3a24f846 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap
@@ -17,7 +17,7 @@ exports[`Footer > renders the Footer component 1`] = `
       class="footer__links"
     >
       <a
-        class="dusk-anchor footer__links-link"
+        class="dusk-anchor dusk-anchor--off-surface footer__links-link"
         href="https://dusk.network/privacy-policy"
       >
         Privacy policy
@@ -25,7 +25,7 @@ exports[`Footer > renders the Footer component 1`] = `
       <!--&lt;Anchor&gt;-->
        
       <a
-        class="dusk-anchor footer__links-link"
+        class="dusk-anchor dusk-anchor--off-surface footer__links-link"
         href="https://dusk.network/terms-of-use"
       >
         Terms of use
@@ -34,7 +34,7 @@ exports[`Footer > renders the Footer component 1`] = `
     </div>
      
     <a
-      class="dusk-anchor footer__logo"
+      class="dusk-anchor dusk-anchor--on-surface footer__logo"
       href="https://dusk.network"
     >
       <picture>
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap
index 70cfdd7ef1..65590e050b 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/Navbar.spec.js.snap
@@ -7,7 +7,7 @@ exports[`Navbar > renders the Navbar component 1`] = `
     style="margin-bottom: 0"
   >
     <a
-      class="dusk-anchor dusk-navbar__logo"
+      class="dusk-anchor dusk-anchor--on-surface dusk-navbar__logo"
       href="/some-base-path/"
     >
       <img
@@ -71,7 +71,7 @@ exports[`Navbar > renders the Navbar component 1`] = `
       >
         
         <a
-          class="dusk-anchor dusk-nav-list__link"
+          class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
           href="/some-base-path/"
         >
           Chain Info
@@ -80,7 +80,7 @@ exports[`Navbar > renders the Navbar component 1`] = `
         <!--&lt;AppAnchor&gt;-->
         
         <a
-          class="dusk-anchor dusk-nav-list__link"
+          class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
           href="/some-base-path/blocks"
         >
           Blocks
@@ -89,7 +89,7 @@ exports[`Navbar > renders the Navbar component 1`] = `
         <!--&lt;AppAnchor&gt;-->
         
         <a
-          class="dusk-anchor dusk-nav-list__link"
+          class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
           href="/some-base-path/transactions"
         >
           Transactions
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
index d32685288f..0e184f9299 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
@@ -85,7 +85,7 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
         class="details-list__definition"
       >
         <a
-          class="dusk-anchor transaction-details__list-anchor"
+          class="dusk-anchor dusk-anchor--on-surface transaction-details__list-anchor"
           href="/some-base-path/blocks/block?id=3c6e4018cfa86723e50644e33d3990bc27fc794f6b49fbf6290e4d308e07bd2d"
         >
           487,166
@@ -449,7 +449,7 @@ exports[`Transaction Details > renders the Transaction Details component with th
         class="details-list__definition"
       >
         <a
-          class="dusk-anchor transaction-details__list-anchor"
+          class="dusk-anchor dusk-anchor--on-surface transaction-details__list-anchor"
           href="/some-base-path/blocks/block?id=3c6e4018cfa86723e50644e33d3990bc27fc794f6b49fbf6290e4d308e07bd2d"
         >
           487,166
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
index 6ce260e6e7..2dd8f69e1c 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
@@ -133,7 +133,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=4877687c2dbf154248d3ddee9ba0d81e3431f39056f82a46819da041d4ac0e04"
             >
               3c6e4018cf...308e07bd2d
@@ -222,7 +222,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=807d4f596ea083215bb38decf8b7e824e3efae734d6a43c2549717e57d04cf02"
             >
               40d3e59a9b...5e8ade4d3b
@@ -311,7 +311,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=744b1d303f71e76e530b0543c284f65a30a26b75eab194d473c59d7fbd676a0b"
             >
               ea86c56ffa...8914074fe3
@@ -400,7 +400,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=34b4404adc0d286e62ddb9bf80429d4491b61de3f5e4c54975724a6d248d8e0b"
             >
               ea86c56ffa...8914074fe3
@@ -489,7 +489,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=88ac1818eb5aeee47a1356fe5d75726943c12ea1fb8ed23efb37c847a318ed0e"
             >
               a85a0f5cc2...f0bb827312
@@ -578,7 +578,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=3e430f7bbc123585a21b0689331d77a8c9e3da9b75ccc463aaf22d8a581e5507"
             >
               646bd535ae...67c1cb0906
@@ -667,7 +667,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=776c0c54ccdd485fb32d6562b2b8b10f3cb283465da6eecba861f384725e3f0b"
             >
               fbcda951c6...4bec844f78
@@ -756,7 +756,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=e022261204125d87ad99d404b73d0ca3ce4c0985e50f08b15a1619248ae0f702"
             >
               a90821aca4...11467eb9c6
@@ -845,7 +845,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=fd9af8e161863389c2c52c900dc3881c754c7d2549f865df95ccfa0f57fe5b04"
             >
               4db9e793b1...e2ab163e74
@@ -934,7 +934,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is
             class="table__data-cell"
           >
             <a
-              class="dusk-anchor transaction__link"
+              class="dusk-anchor dusk-anchor--on-surface transaction__link"
               href="/some-base-path/transactions/transaction?id=65be1885cbbf9545bc3b0f3c56b34da79672f2be063d81a5d4f78b2ca5c18101"
             >
               47c9f1349f...e7ce5103db
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
index 3310293366..13b1dcf972 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsList.spec.js.snap
@@ -31,7 +31,7 @@ exports[`Transactions List > renders the Transactions List component 1`] = `
       class="details-list__definition details-list__definition--table"
     >
       <a
-        class="dusk-anchor transaction-details__list-link"
+        class="dusk-anchor dusk-anchor--on-surface transaction-details__list-link"
         href="/some-base-path/transactions/transaction?id=4877687c2dbf154248d3ddee9ba0d81e3431f39056f82a46819da041d4ac0e04"
       >
         4877687c2dbf154248d3ddee9ba0d8...31f39056f82a46819da041d4ac0e04
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap
index 3375b4f776..641d54ece2 100644
--- a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap
+++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsTable.spec.js.snap
@@ -68,7 +68,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=4877687c2dbf154248d3ddee9ba0d81e3431f39056f82a46819da041d4ac0e04"
           >
             3c6e4018cf...308e07bd2d
@@ -157,7 +157,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=807d4f596ea083215bb38decf8b7e824e3efae734d6a43c2549717e57d04cf02"
           >
             40d3e59a9b...5e8ade4d3b
@@ -246,7 +246,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=744b1d303f71e76e530b0543c284f65a30a26b75eab194d473c59d7fbd676a0b"
           >
             ea86c56ffa...8914074fe3
@@ -335,7 +335,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=34b4404adc0d286e62ddb9bf80429d4491b61de3f5e4c54975724a6d248d8e0b"
           >
             ea86c56ffa...8914074fe3
@@ -424,7 +424,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=88ac1818eb5aeee47a1356fe5d75726943c12ea1fb8ed23efb37c847a318ed0e"
           >
             a85a0f5cc2...f0bb827312
@@ -513,7 +513,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=3e430f7bbc123585a21b0689331d77a8c9e3da9b75ccc463aaf22d8a581e5507"
           >
             646bd535ae...67c1cb0906
@@ -602,7 +602,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=776c0c54ccdd485fb32d6562b2b8b10f3cb283465da6eecba861f384725e3f0b"
           >
             fbcda951c6...4bec844f78
@@ -691,7 +691,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=e022261204125d87ad99d404b73d0ca3ce4c0985e50f08b15a1619248ae0f702"
           >
             a90821aca4...11467eb9c6
@@ -780,7 +780,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=fd9af8e161863389c2c52c900dc3881c754c7d2549f865df95ccfa0f57fe5b04"
           >
             4db9e793b1...e2ab163e74
@@ -869,7 +869,7 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component
           class="table__data-cell"
         >
           <a
-            class="dusk-anchor transaction__link"
+            class="dusk-anchor dusk-anchor--on-surface transaction__link"
             href="/some-base-path/transactions/transaction?id=65be1885cbbf9545bc3b0f3c56b34da79672f2be063d81a5d4f78b2ca5c18101"
           >
             47c9f1349f...e7ce5103db
diff --git a/explorer/src/lib/components/app-anchor/AppAnchor.svelte b/explorer/src/lib/components/app-anchor/AppAnchor.svelte
index 776a37eafe..66e2bd8055 100644
--- a/explorer/src/lib/components/app-anchor/AppAnchor.svelte
+++ b/explorer/src/lib/components/app-anchor/AppAnchor.svelte
@@ -6,8 +6,11 @@
 
   /** @type {string} */
   export let href;
+
+  /** @type {boolean} */
+  export let onSurface = true;
 </script>
 
-<Anchor {...$$restProps} href={addBasePath(href)} on:click>
+<Anchor {onSurface} {...$$restProps} href={addBasePath(href)} on:click>
   <slot />
 </Anchor>
diff --git a/explorer/src/lib/components/blocks-list/BlocksList.css b/explorer/src/lib/components/blocks-list/BlocksList.css
index c515eebdb0..51ca382cdb 100644
--- a/explorer/src/lib/components/blocks-list/BlocksList.css
+++ b/explorer/src/lib/components/blocks-list/BlocksList.css
@@ -1,7 +1,3 @@
-.block-details__list-link {
-  text-decoration: none;
-}
-
 .dusk-progress-bar.blocks-list__gas-used {
   width: 60%;
 }
diff --git a/explorer/src/lib/components/blocks-table/BlocksTable.css b/explorer/src/lib/components/blocks-table/BlocksTable.css
index 933ed06418..f7dadede1e 100644
--- a/explorer/src/lib/components/blocks-table/BlocksTable.css
+++ b/explorer/src/lib/components/blocks-table/BlocksTable.css
@@ -1,7 +1,3 @@
-.block__link {
-  text-decoration: none;
-}
-
 .block__fee-avg-label,
 .block__fee-total-label {
   font-weight: 500;
diff --git a/explorer/src/lib/components/footer/Footer.css b/explorer/src/lib/components/footer/Footer.css
index 7cd163eec9..0a595a2d04 100644
--- a/explorer/src/lib/components/footer/Footer.css
+++ b/explorer/src/lib/components/footer/Footer.css
@@ -19,6 +19,7 @@
 }
 
 .footer__links-link {
+  text-decoration: underline;
   color: var(--primary-color);
 }
 
diff --git a/explorer/src/lib/components/footer/Footer.svelte b/explorer/src/lib/components/footer/Footer.svelte
index f49e247556..d7a13c1420 100644
--- a/explorer/src/lib/components/footer/Footer.svelte
+++ b/explorer/src/lib/components/footer/Footer.svelte
@@ -12,10 +12,12 @@
   </div>
   <div class="footer__links">
     <Anchor
+      onSurface={false}
       href="https://dusk.network/privacy-policy"
       className="footer__links-link">Privacy policy</Anchor
     >
     <Anchor
+      onSurface={false}
       href="https://dusk.network/terms-of-use"
       className="footer__links-link">Terms of use</Anchor
     >
diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.css b/explorer/src/lib/components/transaction-details/TransactionDetails.css
index 96292cfc7b..3d2b8d6f37 100644
--- a/explorer/src/lib/components/transaction-details/TransactionDetails.css
+++ b/explorer/src/lib/components/transaction-details/TransactionDetails.css
@@ -11,10 +11,6 @@
   width: 100%;
 }
 
-.transaction-details__list-anchor {
-  text-decoration: none;
-}
-
 .transaction-details__gas-used {
   width: 12.5rem;
 }
diff --git a/explorer/src/lib/components/transactions-list/TransactionsList.css b/explorer/src/lib/components/transactions-list/TransactionsList.css
index 2aa4cc00db..0adeeea024 100644
--- a/explorer/src/lib/components/transactions-list/TransactionsList.css
+++ b/explorer/src/lib/components/transactions-list/TransactionsList.css
@@ -1,4 +1,3 @@
 .transaction-details__list-link {
-  text-decoration: none;
   text-transform: uppercase;
 }
diff --git a/explorer/src/lib/components/transactions-table/TransactionsTable.css b/explorer/src/lib/components/transactions-table/TransactionsTable.css
index 9662e1e4ef..274b24b986 100644
--- a/explorer/src/lib/components/transactions-table/TransactionsTable.css
+++ b/explorer/src/lib/components/transactions-table/TransactionsTable.css
@@ -1,7 +1,3 @@
-.transaction__link {
-  text-decoration: none;
-}
-
 .transaction__fee-price-label,
 .transaction__fee-limit-label {
   font-weight: 500;
diff --git a/explorer/src/lib/dusk/components/__tests__/__snapshots__/Anchor.spec.js.snap b/explorer/src/lib/dusk/components/__tests__/__snapshots__/Anchor.spec.js.snap
index 84f57ef7d6..0d3b76bec9 100644
--- a/explorer/src/lib/dusk/components/__tests__/__snapshots__/Anchor.spec.js.snap
+++ b/explorer/src/lib/dusk/components/__tests__/__snapshots__/Anchor.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`Anchor > should pass additional class names and attributes to the rendered element 1`] = `
 <div>
   <a
-    class="dusk-anchor foo bar"
+    class="dusk-anchor dusk-anchor--on-surface foo bar"
     href="https://dusk.network"
     title="Some title"
   >
@@ -20,7 +20,7 @@ exports[`Anchor > should pass additional class names and attributes to the rende
 exports[`Anchor > should render the Anchor component 1`] = `
 <div>
   <a
-    class="dusk-anchor"
+    class="dusk-anchor dusk-anchor--on-surface"
     href="https://example.com"
   >
     <span>
diff --git a/explorer/src/lib/dusk/components/__tests__/__snapshots__/NavList.spec.js.snap b/explorer/src/lib/dusk/components/__tests__/__snapshots__/NavList.spec.js.snap
index bc90fb7964..ee07f2c1ee 100644
--- a/explorer/src/lib/dusk/components/__tests__/__snapshots__/NavList.spec.js.snap
+++ b/explorer/src/lib/dusk/components/__tests__/__snapshots__/NavList.spec.js.snap
@@ -7,7 +7,7 @@ exports[`NavList > renders the NavList component 1`] = `
   >
     
     <a
-      class="dusk-anchor dusk-nav-list__link"
+      class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
       href="https://dusk.network"
     >
       Dusk
@@ -16,7 +16,7 @@ exports[`NavList > renders the NavList component 1`] = `
     <!--&lt;AppAnchor&gt;-->
     
     <a
-      class="dusk-anchor dusk-nav-list__link"
+      class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
       href="https://explorer.dusk.network"
     >
       Explorer
@@ -36,7 +36,7 @@ exports[`NavList > should pass additional class names and attributes to the rend
   >
     
     <a
-      class="dusk-anchor dusk-nav-list__link"
+      class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
       href="https://dusk.network"
     >
       Dusk
@@ -45,7 +45,7 @@ exports[`NavList > should pass additional class names and attributes to the rend
     <!--&lt;AppAnchor&gt;-->
     
     <a
-      class="dusk-anchor dusk-nav-list__link"
+      class="dusk-anchor dusk-anchor--off-surface dusk-nav-list__link"
       href="https://explorer.dusk.network"
     >
       Explorer
diff --git a/explorer/src/lib/dusk/components/anchor/Anchor.css b/explorer/src/lib/dusk/components/anchor/Anchor.css
index 5f1266f84c..7755841bc7 100644
--- a/explorer/src/lib/dusk/components/anchor/Anchor.css
+++ b/explorer/src/lib/dusk/components/anchor/Anchor.css
@@ -1,18 +1,30 @@
 .dusk-anchor {
+  text-decoration: none;
+}
+
+.dusk-anchor--off-surface {
   color: var(--anchor-color);
 }
-.dusk-anchor:visited {
+
+.dusk-anchor--off-surface:visited {
   color: var(--anchor-color-visited);
 }
 
-.dusk-anchor:hover {
+.dusk-anchor--off-surface:hover {
   color: var(--anchor-color-hover);
 }
 
-.dusk-anchor:active {
+.dusk-anchor--off-surface:active {
   color: var(--anchor-color-active);
 }
 
-.dusk-anchor.dusk-anchor__disabled {
-  pointer-events: none;
+.dusk-anchor--on-surface,
+.dusk-anchor--on-surface:visited,
+.dusk-anchor--on-surface:hover,
+.dusk-anchor--on-surface:active {
+  color: var(--anchor-color-on-surface);
+}
+
+.dusk-anchor--on-surface:hover {
+  text-decoration: underline;
 }
diff --git a/explorer/src/lib/dusk/components/anchor/Anchor.svelte b/explorer/src/lib/dusk/components/anchor/Anchor.svelte
index d8264a2dbb..44e85cb29d 100644
--- a/explorer/src/lib/dusk/components/anchor/Anchor.svelte
+++ b/explorer/src/lib/dusk/components/anchor/Anchor.svelte
@@ -9,11 +9,18 @@
 
   /** @type {String} */
   export let href;
+
+  /** @type {boolean} */
+  export let onSurface = true;
 </script>
 
 <a
   {...$$restProps}
-  class={makeClassName(["dusk-anchor", className])}
+  class={makeClassName([
+    "dusk-anchor",
+    `dusk-anchor--${onSurface ? "on-surface" : "off-surface"}`,
+    className,
+  ])}
   {href}
   on:click
 >
diff --git a/explorer/src/lib/dusk/components/nav-list/NavList.css b/explorer/src/lib/dusk/components/nav-list/NavList.css
index 89571a0ac0..ab7f6fb75f 100644
--- a/explorer/src/lib/dusk/components/nav-list/NavList.css
+++ b/explorer/src/lib/dusk/components/nav-list/NavList.css
@@ -11,7 +11,6 @@
   font-size: 1.5rem;
   font-weight: 500;
   line-height: 1;
-  text-decoration: none;
   color: var(--primary-color);
 }
 
diff --git a/explorer/src/lib/dusk/components/nav-list/NavList.svelte b/explorer/src/lib/dusk/components/nav-list/NavList.svelte
index 61635501b4..d3e27f0bb3 100644
--- a/explorer/src/lib/dusk/components/nav-list/NavList.svelte
+++ b/explorer/src/lib/dusk/components/nav-list/NavList.svelte
@@ -15,8 +15,10 @@
 {#if navigation}
   <nav class={classes}>
     {#each navigation as item, index (`${item.title}-${index}`)}
-      <AppAnchor className="dusk-nav-list__link" href={item.link}
-        >{item.title}</AppAnchor
+      <AppAnchor
+        onSurface={false}
+        className="dusk-nav-list__link"
+        href={item.link}>{item.title}</AppAnchor
       >
     {/each}
   </nav>
diff --git a/explorer/src/style/dusk/colors.css b/explorer/src/style/dusk/colors.css
index 409f236b29..9359f710fe 100644
--- a/explorer/src/style/dusk/colors.css
+++ b/explorer/src/style/dusk/colors.css
@@ -18,6 +18,9 @@
   --cornflower-dark: #0b79ff;
   --cornflower-light: #a4cdff;
 
+  --accent-light-900: #04336b;
+  --accent-dark-900: #abd1ff;
+
   /* Status */
 
   --success: #16db93;
diff --git a/explorer/src/style/dusk/language.css b/explorer/src/style/dusk/language.css
index b40ad0e1b7..07bda21e2c 100644
--- a/explorer/src/style/dusk/language.css
+++ b/explorer/src/style/dusk/language.css
@@ -79,6 +79,7 @@
 
   /* Anchors */
 
+  --anchor-color-on-surface: var(--accent-light-900);
   --anchor-color: var(--secondary-color);
   --anchor-color-visited: var(--secondary-color);
   --anchor-color-hover: var(--secondary-color-variant-light);
@@ -116,6 +117,9 @@
   --on-primary-color: var(--smokey-black);
   --on-surface-color: var(--light-grey);
 
+  /* Anchors */
+  --anchor-color-on-surface: var(--accent-dark-900);
+
   /* Controls */
 
   --control-bg-color: var(--smokey-black);