add accent-color-link

_sass/_base.scss

@@ -126,15 +126,15 @@ h6 {
  * Links
  */
 a {
-  color: $link-base-color;
-  text-decoration: none;
+  color: var(--accent-color-link);
+  text-decoration: var(--accent-decoration);
 
   &:visited {
-    color: $link-visited-color;
+    color: var(--accent-color-link);
   }
 
   &:hover {
-    color: $link-hover-color;
+    color: var(----accent-color-link-hover);
     text-decoration: underline;
   }
 

_sass/_layout.scss

@@ -22,7 +22,7 @@
 
   &,
   &:visited {
-    color: $site-title-color;
+    color: var(--white-50);
   }
 }
 

_sass/custom-styles.scss

@@ -24,15 +24,17 @@
 
   --accent-color-default: #1c4590;
   --accent-color: var(--accent-color-default); // configurable
-  --accent-color-contrast: #1e90ff; // TODO configurable
-  --accent-decoration: none; // configurable
+  --accent-color-link: #1e90ff; // TODO configurable
+  --accent-color-link-hover: #1560ab; // TODO configurable
+  --link-decoration: none; // configurable
 
   // TODO make tokens consuming palette
   --text-primary: var(--white-90);
   --text--secondary: var(--white-70);
 
   --border-radius: 6px;
 }
+
 #theme-button-wrapper {
   position: fixed;
   --size: 28px;
@@ -198,28 +200,27 @@
   padding: 2px 8px;
   margin: -2px 0px;
   border-radius: var(--border-radius);
-  border: 1px solid var(--accent-color-contrast);
+  border: 1px solid var(--accent-color-link);
   transition: transform 100ms, color 100ms, border 100ms;
   display: flex;
   align-items: center;
   gap: 6px;
   text-decoration: none;
   &:hover {
-    background-color: #ffffff2a;
-    color: #ffffff;
-    border: 1px solid #ffffff;
+    color: var(--accent-color-link-hover);
+    border: 1px solid var(--accent-color-link-hover);
     text-decoration: none;
     transform: scale(1.03);
   }
   @media (max-width: 800px) {
     & svg {
       display: none;
     }
-    color: var(--accent-color-contrast);
+    color: var(--accent-color-link);
     border: none;
     margin: 0;
     padding: 0;
-    text-decoration: var(--accent-decoration);
+    text-decoration: var(--link-decoration);
     &:hover {
       border: none;
       background-color: unset;
@@ -434,7 +435,7 @@ pre.terminal {
   }
 
   .domain {
-    color: #ffffff85;
+    color: var(--white-50);
     line-height: 1.3;
     font-family: "Ubuntu Mono";
   }
@@ -447,7 +448,6 @@ pre.terminal {
 }
 
 a .domain {
-  color: #b9b9b9;
   font-size: 16px;
   line-height: 1;
   font-family: "Ubuntu Mono";
@@ -581,10 +581,10 @@ nav > a {
   font-size: 16px !important;
   font-weight: 400;
   position: relative;
-  text-decoration: var(--accent-decoration);
-  color: var(--accent-color-contrast);
-  &:visited {
-    color: var(--accent-color-contrast);
+  text-decoration: var(--link-decoration);
+  color: var(--accent-color-link);
+  &:hover {
+    color: var(--accent-color-link-hover);
   }
 }
 
@@ -640,7 +640,7 @@ nav > a {
   font-size: 0.8em;
   color: var(--text--secondary);
   font-weight: 400;
-  -webkit-line-clamp: 2;
+  line-clamp: 2;
   text-overflow: ellipsis;
   margin-top: 4px;
 }

assets/ts/terminal/updateAccentColor.ts

@@ -7,13 +7,17 @@ export const updateAccentColor = (inputColor: string): boolean => {
     }
 
     const accentColor = getAdjustedAccentColor(chroma(inputColor));
-    const accentColorContrast = getContrastColor(accentColor);
-    const accentDecoration = hasLowSaturation(accentColorContrast)
-      ? "underline"
-      : "none";
-
-    setColorsInLocalStorage(accentColor, accentColorContrast);
-    setColorsInCSS(accentColor, accentColorContrast, accentDecoration);
+    const linkColor = getContrastColor(accentColor);
+    const linkHoverColor = getHoverColor(accentColor);
+    const linkDecoration = hasLowSaturation(linkColor) ? "underline" : "none";
+
+    setColorsInLocalStorage(
+      accentColor,
+      linkColor,
+      linkHoverColor,
+      linkDecoration
+    );
+    setColorsInCSS(accentColor, linkColor, linkHoverColor, linkDecoration);
 
     return true;
   } catch (error) {
@@ -22,17 +26,27 @@ export const updateAccentColor = (inputColor: string): boolean => {
   }
 };
 
+const getHoverColor = (color: chroma.Color): chroma.Color => {
+  if (color.luminance() < 0.95) {
+    return color.brighten(0.5);
+  } else {
+    return color.darken(0.05);
+  }
+};
+
 const isValidColor = (color: string): boolean => {
   return chroma.valid(color);
 };
 
 const getAdjustedAccentColor = (color: chroma.Color): chroma.Color => {
-  // Adjust luminance to avoid too black or too white
+  const minLuminance = 0.15;
+  const maxLuminance = 0.85;
+
   const luminance = color.luminance();
-  if (luminance < 0.25) {
-    color = color.luminance(0.25);
-  } else if (luminance > 0.5) {
-    color = color.luminance(0.5);
+  if (luminance < minLuminance) {
+    color = color.luminance(minLuminance);
+  } else if (luminance > maxLuminance) {
+    color = color.luminance(maxLuminance);
   }
 
   // Ensure color is vibrant but not fully saturated
@@ -45,13 +59,14 @@ const getContrastColor = (accentColor: chroma.Color): chroma.Color => {
   if (accentColor.get("hsl.s") === 0) {
     // Return a vibrant link-friendly color like teal blue
     const colorOptions = ["#00796b", "#00acc1", "#1976d2", "#2196f3"];
-    accentColor = chroma(
+    const chromaColor = chroma(
       colorOptions[Math.floor(Math.random() * colorOptions.length)]
     );
+    return chromaColor.set("hsl.s", 1);
   }
 
   const vibrantColor = accentColor.set("hsl.s", 1);
-  vibrantColor.set("hsl.l", 0.75);
+  vibrantColor.set("hsl.l", 0.5);
 
   const MIN_CONTRAST = 1.75;
 
@@ -86,30 +101,36 @@ const hasLowSaturation = (color: chroma.Color): boolean => {
 
 const setColorsInLocalStorage = (
   accentColor: chroma.Color,
-  accentColorContrast: chroma.Color
+  linkColor: chroma.Color,
+  linkHoverColor: chroma.Color,
+  linkDecoration: string
 ): void => {
-  const cssAccentColor = accentColor.hex();
-  const cssAccentContrastColor = accentColorContrast.hex();
-
-  localStorage.setItem("ACCENT_COLOR", cssAccentColor);
-  localStorage.setItem("LINK_COLOR", cssAccentContrastColor);
+  localStorage.setItem("ACCENT_COLOR", accentColor.hex());
+  localStorage.setItem("LINK_COLOR", linkColor.hex());
+  localStorage.setItem("LINK_COLOR_HOVER", linkHoverColor.hex());
+  localStorage.setItem("LINK_DECORATION", linkDecoration);
 };
 
 const setColorsInCSS = (
   accentColor: chroma.Color,
-  accentColorContrast: chroma.Color,
-  accentDecoration: string
+  linkColor: chroma.Color,
+  linkHoverColor: chroma.Color,
+  linkDecoration: string
 ): void => {
-  const cssAccentColor = accentColor.hex();
-  const cssAccentContrastColor = accentColorContrast.hex();
-
-  document.documentElement.style.setProperty("--accent-color", cssAccentColor);
   document.documentElement.style.setProperty(
-    "--accent-color-contrast",
-    cssAccentContrastColor
+    "--accent-color",
+    accentColor.hex()
+  );
+  document.documentElement.style.setProperty(
+    "--accent-color-link",
+    linkColor.hex()
+  );
+  document.documentElement.style.setProperty(
+    "--accent-color-link-hover",
+    linkHoverColor.hex()
   );
   document.documentElement.style.setProperty(
-    "--accent-decoration",
-    accentDecoration
+    "--link-decoration",
+    linkDecoration
   );
 };