Merge pull request #1251 from thunderstore-io/10-31-fix_footer_link_c…

…olors Fix footer link colors
thunderstore-io · Oct 31, 2024 · fb7f0e2 · fb7f0e2
2 parents 948c2aa + 7fadf75
commit fb7f0e2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
@@ -185,6 +185,11 @@
     color: var(--color-text-accent);
   }
 
+  .project-footer__info {
+    --link-color: var(--color-text-accent);
+    --link-color-hover: var(--color-text-primary);
+  }
+
   @media (width >= calc(63.5rem + 1px)) {
     .project-footer__logoandlinks {
       flex-direction: row;
@@ -238,6 +243,9 @@
 
     .project-footer__footnote {
       padding-block-end: var(--space-32);
+
+      --link-color: var(--color-text-accent);
+      --link-color-hover: var(--color-text-primary);
     }
 
     .project-footer__nav {

diff --git a/packages/cyberstorm-theme/src/components/Link/Link.css b/packages/cyberstorm-theme/src/components/Link/Link.css
@@ -2,20 +2,20 @@
   /* VARIANTS DEFAULT STATE */
   .ts-link:where(.ts-variant--primary) {
     --link-color: var(--link-primary-color--default);
+
+    &:where(:hover) {
+      --link-color-hover: var(--link-primary-color--hover);
+    }
   }
 
   .ts-link:where(.ts-variant--cyber) {
     --link-color: var(--link-cyber-color--default);
-  }
-
-  .ts-link:where(.ts-variant--primary):hover {
-    --link-color: var(--link-primary-color--hover);
-  }
 
-  .ts-link:where(.ts-variant--cyber):hover {
-    --link-color: var(--link-cyber-color--hover);
+    &:where(:hover) {
+      --link-color-hover: var(--link-cyber-color--hover);
 
-    text-decoration: underline;
+      text-decoration: underline;
+    }
   }
 
   /* TOKENS */

diff --git a/packages/cyberstorm/src/newComponents/Link/Link/Link.css b/packages/cyberstorm/src/newComponents/Link/Link/Link.css
@@ -2,5 +2,9 @@
   .ts-link {
     color: var(--link-color);
     text-decoration: none;
+
+    &:hover {
+      color: var(--link-color-hover);
+    }
   }
 }