Add :visited colour and enforce uniform contrast between light/dark

The typography colours now consistently have a contrast of ~6.
pradyunsg · Jan 30, 2024 · ae21077 · ae21077
1 parent c718f86
commit ae21077
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/furo/assets/styles/base/_typography.sass b/src/furo/assets/styles/base/_typography.sass
@@ -84,11 +84,21 @@ a
   color: var(--color-link)
   text-decoration-color: var(--color-link-underline)
 
+  &:visited
+    color: var(--color-link--visited)
+    text-decoration-color: var(--color-link-underline--visited)
+    &:hover
+      color: var(--color-link--visited--hover)
+      text-decoration-color: var(--color-link-underline--visited--hover)
+
   &:hover
     color: var(--color-link--hover)
     text-decoration-color: var(--color-link-underline--hover)
   &.muted-link
     color: inherit
     &:hover
-      color: var(--color-link)
+      color: var(--color-link--hover)
       text-decoration-color: var(--color-link-underline--hover)
+      &:visited
+        color: var(--color-link--visited--hover)
+        text-decoration-color: var(--color-link-underline--visited--hover)
diff --git a/src/furo/assets/styles/variables/_colors.scss b/src/furo/assets/styles/variables/_colors.scss
@@ -27,8 +27,9 @@
   --color-announcement-text: #eeebee;
 
   // Brand colors
-  --color-brand-primary: #2962ff;
-  --color-brand-content: #2a5adf;
+  --color-brand-primary: #0a4bff;
+  --color-brand-content: #2757dd;
+  --color-brand-visited: #872ee0;
 
   // API documentation
   --color-api-background: var(--color-background-hover--transparent);
@@ -120,16 +121,21 @@
 
   // Links
   --color-link: var(--color-brand-content);
-  --color-link--hover: var(--color-brand-content);
   --color-link-underline: var(--color-background-border);
+  --color-link--hover: var(--color-brand-content);
   --color-link-underline--hover: var(--color-foreground-border);
+
+  --color-link--visited: var(--color-brand-visited);
+  --color-link-underline--visited: var(--color-background-border);
+  --color-link--visited--hover: var(--color-brand-visited);
+  --color-link-underline--visited--hover: var(--color-foreground-border);
 }
 
 @mixin colors-dark {
   --color-problematic: #ee5151;
 
   // Base Colors
-  --color-foreground-primary: #ffffffcc; // for main text and headings
+  --color-foreground-primary: #cfd0d0; // for main text and headings
   --color-foreground-secondary: #9ca0a5; // for secondary text
   --color-foreground-muted: #81868d; // for muted text
   --color-foreground-border: #666666; // for content borders
@@ -146,8 +152,9 @@
   --color-announcement-text: #eeebee;
 
   // Brand colors
-  --color-brand-primary: #2b8cee;
-  --color-brand-content: #368ce2;
+  --color-brand-primary: #668fff;
+  --color-brand-content: #7292e9;
+  --color-brand-visited: #b27aeb;
 
   // Highlighted text (search)
   --color-highlighted-background: #083563;