Fix link colors

src/components/Footer.jsx

@@ -4,12 +4,12 @@ export default function Footer() {
   const projectHomepage = import.meta.env.DAKARA_PROJECT_HOMEPAGE
 
   return (
-    <footer id="footer" className="box">
+    <footer id="footer" className="box neutral">
       <div className="flow">
         <h2>
           Dakara client <span className="version">{version}</span>
         </h2>
-        <p className="contact text">
+        <p className="contact">
           Visit the <a href={projectHomepage}>project page</a>
           <br />
           Report a <a href={bugtracker}>bug</a>

src/components/Header.jsx

@@ -36,7 +36,7 @@ export default function Header() {
   }
 
   return (
-    <header id="header" className="box">
+    <header id="header" className="box neutral">
       <h1>
         <NavLink to="/">Dakara</NavLink>
       </h1>

src/components/settings/About.jsx

@@ -59,12 +59,12 @@ export default function About() {
   return (
     <div id="about" className="flow">
       <h3>About the project</h3>
-      <p className="text">
+      <p>
         <a href="https://github.com/DakaraProject">Dakara</a> is an open-source,
         self-hosted Karaoke project.
       </p>
       <h3>About the dependencies</h3>
-      <ul className="text">
+      <ul>
         {dependencies.map((item) => (
           <li key={item.name}>
             <a href={item.url}>{item.name}</a>

src/style/abstracts/_colors.scss

@@ -199,45 +199,74 @@ $danger-502: color.adjust($danger-500, $lightness: 0.05);
 $info-502: color.adjust($info-500, $lightness: 0.05);
 $neutral-502: color.adjust($neutral-500, $lightness: 0.05);
 
-// create colors
+// helper to create colors
+// @param $background color of the background
+// @param $background-selection color of the background when selected or when
+// highlighted
+// @param $text color of normal text
+// @param $text-selection color of text when selected or when highlighted
+// @param $text-quote color of text in a quote
+// @param $link color of a normal link
+// @param $link-hover color of a hovered, non-focused link
+// @param $link-focus color of a focused link
 @mixin make-color(
   $background: null,
-  $color: null,
   $background-selection: null,
-  $color-selection: null,
-  $color-quote: null
+  $text: null,
+  $text-selection: null,
+  $text-quote: null,
+  $link: null,
+  $link-hover: null,
+  $link-focus: null
 ) {
+  // background
   @if $background {
     background: $background;
   }
-  @if $color {
-    color: $color;
 
-    a {
-      color: unset;
+  @if $background-selection {
+    &::selection,
+    ::selection,
+    mark {
+      background: $background-selection;
     }
   }
 
-  &::selection,
-  ::selection {
-    @if $background-selection {
-      background: $background-selection;
+  // text
+  @if $text {
+    color: $text;
+  }
+
+  @if $text-selection {
+    &::selection,
+    ::selection,
+    mark {
+      color: $text-selection;
     }
-    @if $color-selection {
-      color: $color-selection;
+  }
+
+  @if $text-quote {
+    q {
+      color: $text-quote;
+    }
+  }
+
+  // link
+  @if $link {
+    a {
+      color: $link;
     }
   }
 
-  @if $color-selection {
-    a:hover {
-      color: $color-selection;
+  @if $link-hover {
+    a:hover:not(:focus) {
+      color: $link-hover;
     }
   }
 
-  &q,
-  q {
-    @if $color-quote {
-      color: $color-quote;
+  @if $link-focus {
+    a:focus {
+      color: $link-focus;
     }
   }
 }

src/style/base/_colors.scss

@@ -7,60 +7,81 @@
 @use '~/abstracts/colors';
 
 .neutral {
+  // note that some colors are from the primary set
   @include colors.make-color(
-    colors.$neutral-100,
-    colors.$neutral-400,
-    $color-quote: colors.$neutral-500
+    $background: colors.$neutral-100,
+    $background-selection: colors.$primary-200,
+    $text: colors.$neutral-400,
+    $text-selection: colors.$primary-500,
+    $text-quote: colors.$neutral-500,
+    $link: colors.$primary-400,
+    $link-hover: colors.$primary-402,
+    $link-focus: colors.$primary-403
   );
 }
 
 .primary {
   @include colors.make-color(
-    colors.$primary-100,
-    colors.$primary-400,
-    colors.$primary-200,
-    colors.$primary-500,
-    colors.$primary-500
+    $background: colors.$primary-100,
+    $background-selection: colors.$primary-200,
+    $text: colors.$primary-400,
+    $text-selection: colors.$primary-500,
+    $text-quote: colors.$primary-500,
+    $link: colors.$primary-400,
+    $link-hover: colors.$primary-402,
+    $link-focus: colors.$primary-403
   );
 }
 
 .success {
   @include colors.make-color(
-    colors.$success-100,
-    colors.$success-400,
-    colors.$success-200,
-    colors.$success-500,
-    colors.$success-500
+    $background: colors.$success-100,
+    $background-selection: colors.$success-200,
+    $text: colors.$success-400,
+    $text-selection: colors.$success-500,
+    $text-quote: colors.$success-500,
+    $link: colors.$success-400,
+    $link-hover: colors.$success-402,
+    $link-focus: colors.$success-403
   );
 }
 
 .warning {
   @include colors.make-color(
-    colors.$warning-100,
-    colors.$warning-400,
-    colors.$warning-200,
-    colors.$warning-500,
-    colors.$warning-500
+    $background: colors.$warning-100,
+    $background-selection: colors.$warning-200,
+    $text: colors.$warning-400,
+    $text-selection: colors.$warning-500,
+    $text-quote: colors.$warning-500,
+    $link: colors.$warning-400,
+    $link-hover: colors.$warning-402,
+    $link-focus: colors.$warning-403
   );
 }
 
 .danger {
   @include colors.make-color(
-    colors.$danger-100,
-    colors.$danger-400,
-    colors.$danger-200,
-    colors.$danger-500,
-    colors.$danger-500
+    $background: colors.$danger-100,
+    $background-selection: colors.$danger-200,
+    $text: colors.$danger-400,
+    $text-selection: colors.$danger-500,
+    $text-quote: colors.$danger-500,
+    $link: colors.$danger-400,
+    $link-hover: colors.$danger-402,
+    $link-focus: colors.$danger-403
   );
 }
 
 .info {
   @include colors.make-color(
-    colors.$info-100,
-    colors.$info-400,
-    colors.$info-200,
-    colors.$info-500,
-    colors.$info-500
+    $background: colors.$info-100,
+    $background-selection: colors.$info-200,
+    $text: colors.$info-400,
+    $text-selection: colors.$info-500,
+    $text-quote: colors.$info-500,
+    $link: colors.$info-400,
+    $link-hover: colors.$info-402,
+    $link-focus: colors.$info-403
   );
 }
 
@@ -69,27 +90,27 @@
 .listable:nth-child(even) {
   &.primary,
   &:not(:has(.listable)) .primary {
-    @include colors.make-color(colors.$primary-101);
+    @include colors.make-color($background: colors.$primary-101);
   }
 
   &.success,
   &:not(:has(.listable)) .success {
-    @include colors.make-color(colors.$success-101);
+    @include colors.make-color($background: colors.$success-101);
   }
 
   &.warning,
   &:not(:has(.listable)) .warning {
-    @include colors.make-color(colors.$warning-101);
+    @include colors.make-color($background: colors.$warning-101);
   }
 
   &.danger,
   &:not(:has(.listable)) .danger {
-    @include colors.make-color(colors.$danger-101);
+    @include colors.make-color($background: colors.$danger-101);
   }
 
   &.info,
   &:not(:has(.listable)) .info {
-    @include colors.make-color(colors.$info-101);
+    @include colors.make-color($background: colors.$info-101);
   }
 }
 
@@ -98,26 +119,26 @@
 .hoverizable:hover {
   &.primary,
   &:not(:has(.hoverizable)) :not(.non-hoverizable).primary {
-    @include colors.make-color(colors.$primary-102);
+    @include colors.make-color($background: colors.$primary-102);
   }
 
   &.succees,
   &:not(:has(.hoverizable)) :not(.non-hoverizable).success {
-    @include colors.make-color(colors.$success-102);
+    @include colors.make-color($background: colors.$success-102);
   }
 
   &.warning,
   &:not(:has(.hoverizable)) :not(.non-hoverizable).warning {
-    @include colors.make-color(colors.$warning-102);
+    @include colors.make-color($background: colors.$warning-102);
   }
 
   &.danger,
   &:not(:has(.hoverizable)) :not(.non-hoverizable).danger {
-    @include colors.make-color(colors.$danger-102);
+    @include colors.make-color($background: colors.$danger-102);
   }
 
   &.info,
   &:not(:has(.hoverizable)) :not(.non-hoverizable).info {
-    @include colors.make-color(colors.$info-102);
+    @include colors.make-color($background: colors.$info-102);
   }
 }

src/style/base/_common.scss

@@ -15,23 +15,10 @@ html {
 // default colors and margins
 body {
   background: colors.$neutral-000;
-  color: colors.$neutral-400;
   margin: 0;
   padding: 0;
 }
 
-// highlight tag
-mark {
-  background: colors.$primary-200;
-  color: colors.$primary-500;
-}
-
-// selection highlighting
-::selection {
-  background: colors.$primary-200;
-  color: colors.$primary-500;
-}
-
 // make headers thin and marginless
 h1,
 h2,
@@ -51,32 +38,22 @@ h3 {
   font-size: 1.75em;
 }
 
-.text {
+p {
   @include fonts.make-long;
 
   margin: 0;
-
-  // links
-  a {
-    color: colors.$primary-400;
-    text-decoration: underline;
-
-    &:hover:not(:focus) {
-      color: colors.$primary-402;
-    }
-
-    &:focus {
-      color: colors.$primary-403;
-    }
-  }
 }
 
 ul {
   list-style-type: square;
   margin: 0;
 }
 
-// remove border radius from button in some browsers
 button {
+  // remove border radius from button in some browsers
   border-radius: 0;
 }
+
+a {
+  text-decoration: underline;
+}

src/style/components/_footer.scss

@@ -9,19 +9,17 @@
 
 #footer {
   background: colors.$neutral-110;
-  color: colors.$neutral-410;
   text-align: right;
 
   h2 {
     @include sizes.make-gap(padding, horizontal);
 
-    & {
-      font-size: x-large;
-    }
+    font-size: x-large;
+    font-weight: 300;
 
     .version {
       font-size: 0.6em;
-      font-weight: 300;
+      font-weight: 400;
     }
   }