Implements prefers-contrast media query (#1015)

GBKS · web-flow · commit d7a79cead7bd · 2023-09-20T17:15:54.000-04:00
* Implements prefers-contrast media query

This allows users to enable increased contrast in the accessibility settings of their operating system, and see that reflected in the website.

This is also a proof-of-concept for implementing this using CSS variables. It requires replacing $ variables (like $primary-color) with CSS variables (var(--primary-color). Benefit is that the CSS variables can dynamically change at runtime (not just during build time). This more dynamic system allows for the prefers contrast color change to only require 8 lines of code.

But, this needs some testing to ensure it all works cross-browser.

* Adjust the high-contrast color based on feedback
diff --git a/_sass/minima/_article.scss b/_sass/minima/_article.scss
@@ -29,21 +29,21 @@ article.guide {
     color: white;
     line-height: 43px;
     text-decoration: none;
-    background-color: $primary-color;
+    background-color: var(--link-base-color);
     transition: all 150ms $ease;
 
     &:hover {
-      background-color: darken($primary-color, 5);
+      background-color: var(--link-hover-color);
     }
 
     &.-outline {
       background-color: transparent;
-      color: $primary-color;
-      border: 1px solid $primary-color;
+      color: var(--link-base-color);
+      border: 1px solid var(--link-base-color);
 
       &:hover {
-        color: darken($primary-color, 5);
-        border-color: darken($primary-color, 5);
+        color: var(--link-hover-color);
+        border-color: var(--link-hover-color);
       }
     }
   }
@@ -133,7 +133,7 @@ article.guide {
 
     &:hover {
       .small-video-link__caption {
-        color: $primary-color;
+        color: var(--primary-color);
       }
 
       .small-video-link__image {
@@ -212,7 +212,7 @@ article.guide {
         transition: all 100ms $ease;
 
         &:hover {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
 
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
@@ -71,7 +71,7 @@ main {
 
 a:focus-visible,
 button:focus-visible {
-  outline: 4px solid rgba($primary-color, 0.6);
+  outline: 4px solid rgba(var(--primary-color-rgb), 0.6);
   outline-offset: 1px;
 }
 
@@ -157,16 +157,16 @@ h1 {
  * Links
  */
 a {
-  color: $link-base-color;
+  color: var(--link-base-color);
   text-decoration: none;
   transition: color 100ms $ease;
 
   &:visited {
-    color: $link-visited-color;
+    color: var(--link-visited-color);
   }
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--link-hover-color);
     text-decoration: underline;
   }
 
diff --git a/_sass/minima/_glossary-page.scss b/_sass/minima/_glossary-page.scss
@@ -14,7 +14,7 @@
                 color: rgba(var(--front), 0.72);
 
                 &:hover {
-                    color: $primary-color;
+                    color: var(--primary-color);
                     text-decoration: none;
                 }
             }
diff --git a/_sass/minima/_home-banner.scss b/_sass/minima/_home-banner.scss
@@ -202,7 +202,7 @@
         text-decoration: underline;
 
         &:hover {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
     }
@@ -222,7 +222,7 @@
         text-decoration: underline;
 
         &:hover {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
 
diff --git a/_sass/minima/_nav-list.scss b/_sass/minima/_nav-list.scss
@@ -45,16 +45,16 @@
 
       &.-active {
         font-weight: 500;
-        color: $primary-color;
+        color: var(--primary-color);
         text-decoration: none;
 
         &:visited {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
 
       &:hover {
-        color: $primary-color;
+        color: var(--primary-color);
       }
 
       &:hover,
@@ -77,21 +77,21 @@
       svg {
         width: 15px;
         height: 15px;
-        color: $link-base-color;
+        color: var(--link-base-color);
         transition: all 150ms $ease;
       }
 
       &:active,
       &:focus {
         border-width: 0;
-        background-color: rgba($primary-color, 0.1);
+        background-color: rgba(var(--primary-color-rgb), 0.1);
       }
 
       &:hover {
-        background-color: rgba($primary-color, 0.1);
+        background-color: rgba(var(--primary-color-rgb), 0.1);
 
         svg {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
     }
@@ -113,25 +113,25 @@
           color: #474747;
 
           &:hover {
-            color: $primary-color;
+            color: var(--primary-color);
           }
         }
       }
     }
 
     &.-active {
       > a.nav-list-link {
-        color: $primary-color;
+        color: var(--primary-color);
 
         &:visited {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
 
       > .nav-list-expander {
         svg {
           transform: rotate(90deg);
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
 
diff --git a/_sass/minima/_next-previous.scss b/_sass/minima/_next-previous.scss
@@ -21,7 +21,7 @@
       transition: all 150ms $ease;
 
       &:hover {
-        color: $primary-color;
+        color: var(--primary-color);
         text-decoration: underline;
       }
     }
@@ -67,11 +67,11 @@
         }
 
         &:hover {
-          color: $primary-color;
+          color: var(--primary-color);
           text-decoration: none;
 
           svg {
-            fill: $primary-color !important;
+            fill: var(--primary-color) !important;
           }
         }
 
@@ -119,8 +119,8 @@
     }
 
     &:hover {
-      color: $primary-color;
-      border-color: $primary-color;
+      color: var(--primary-color);
+      border-color: var(--primary-color);
     }
   }
 
diff --git a/_sass/minima/_search-page.scss b/_sass/minima/_search-page.scss
@@ -24,7 +24,7 @@
 
         &:active,
         &:focus {
-            border-color: $primary-color;
+            border-color: var(--primary-color);
             outline: none;
         }
     }
@@ -60,10 +60,10 @@
 
             &:hover {
                 text-decoration: none;
-                background-color: rgba($primary-color, 0.05);
+                background-color: rgba(var(--primary-color-rgb), 0.05);
 
                 h3 {
-                    color: $primary-color;
+                    color: var(--primary-color);
                 }
             }
         }
@@ -77,4 +77,4 @@
         }
     }
   }
-}
+}
diff --git a/_sass/minima/_site-footer.scss b/_sass/minima/_site-footer.scss
@@ -31,7 +31,7 @@
 
       &:hover {
         svg {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
     }
@@ -51,7 +51,7 @@
         font-size: 16px;
 
         &:hover {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
     }
@@ -74,7 +74,7 @@
 
         &:hover {
           svg {
-            fill: $primary-color !important;
+            fill: var(--primary-color) !important;
           }
         }
 
@@ -101,7 +101,7 @@
         font-size: 16px;
 
         &:hover {
-          color: $primary-color;
+          color: var(--primary-color);
         }
       }
 
diff --git a/_sass/minima/_site-header.scss b/_sass/minima/_site-header.scss
@@ -32,7 +32,7 @@
             white-space: nowrap;
 
             &:focus {
-                outline: 2px solid $primary-color;
+                outline: 2px solid var(--primary-color);
             }
 
             svg {
@@ -51,15 +51,15 @@
             }
 
             &:focus {
-                background-color: rgba($primary-color, 0.05);
+                background-color: rgba(var(--primary-color), 0.05);
             }
 
             &:hover {
-                color: $primary-color;
+                color: var(--primary-color);
                 text-decoration: none;
 
                 svg {
-                    color: $primary-color;
+                    color: var(--primary-color);
                 }
             }
         }
@@ -75,16 +75,16 @@
                 font-weight: 500;
 
                 &:hover {
-                    color: $primary-color;
+                    color: var(--primary-color);
                     text-decoration: none;
                 }
 
                 &:focus {
-                    background-color: rgba($primary-color, 0.1);
+                    background-color: rgba(var(--primary-color), 0.1);
                 }
 
                 &.active {
-                    color: $primary-color;
+                    color: var(--primary-color);
                 }
             }
 
@@ -110,18 +110,18 @@
             }
 
             &:focus {
-                background-color: rgba($primary-color, 0.05);
+                background-color: rgba(var(--primary-color), 0.05);
             }
 
             &:hover {
                 svg {
-                    color: $primary-color;
+                    color: var(--primary-color);
                 }
             }
 
             &.-active {
                 svg {
-                    color: $primary-color;
+                    color: var(--primary-color);
                 }
             }
         }
@@ -205,10 +205,10 @@
 
                         &:hover {
                             text-decoration: none;
-                            background-color: rgba($primary-color, 0.05);
+                            background-color: rgba(var(--primary-color), 0.05);
 
                             h3 {
-                                color: $primary-color;
+                                color: var(--primary-color);
                             }
                         }
                     }
@@ -255,11 +255,11 @@
                 }
 
                 &:focus {
-                    background-color: rgba($primary-color, 0.05);
+                    background-color: rgba(var(--primary-color), 0.05);
                 }
 
                 &:hover {
-                    color: $primary-color;
+                    color: var(--primary-color);
                 }
             }
 
@@ -341,7 +341,7 @@
 
                 .nav-trigger {                    
                     svg {
-                        fill: $primary-color;
+                        fill: var(--primary-color);
                     }
                 }
             }
@@ -376,7 +376,7 @@
                         bottom: -1px;
                         height: 1px;
                         opacity: 0;
-                        background-color: $primary-color;
+                        background-color: var(--primary-color);
                     }
 
                     &.active {
diff --git a/_sass/minima/_variables.scss b/_sass/minima/_variables.scss
diff --git a/_sass/minima/article/_emoji-box.scss b/_sass/minima/article/_emoji-box.scss
diff --git a/_sass/minima/skins/classic.scss b/_sass/minima/skins/classic.scss

Original file line number	Diff line number	Diff line change
`@@ -29,21 +29,21 @@ article.guide {`
`29`	`29`	`color: white;`
`30`	`30`	`line-height: 43px;`
`31`	`31`	`text-decoration: none;`
`32`		`- background-color: $primary-color;`
	`32`	`+ background-color: var(--link-base-color);`
`33`	`33`	`transition: all 150ms $ease;`
`34`	`34`
`35`	`35`	`&:hover {`
`36`		`- background-color: darken($primary-color, 5);`
	`36`	`+ background-color: var(--link-hover-color);`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`&.-outline {`
`40`	`40`	`background-color: transparent;`
`41`		`- color: $primary-color;`
`42`		`- border: 1px solid $primary-color;`
	`41`	`+ color: var(--link-base-color);`
	`42`	`+ border: 1px solid var(--link-base-color);`
`43`	`43`
`44`	`44`	`&:hover {`
`45`		`- color: darken($primary-color, 5);`
`46`		`- border-color: darken($primary-color, 5);`
	`45`	`+ color: var(--link-hover-color);`
	`46`	`+ border-color: var(--link-hover-color);`
`47`	`47`	`}`
`48`	`48`	`}`
`49`	`49`	`}`
`@@ -133,7 +133,7 @@ article.guide {`
`133`	`133`
`134`	`134`	`&:hover {`
`135`	`135`	`.small-video-link__caption {`
`136`		`- color: $primary-color;`
	`136`	`+ color: var(--primary-color);`
`137`	`137`	`}`
`138`	`138`
`139`	`139`	`.small-video-link__image {`
`@@ -212,7 +212,7 @@ article.guide {`
`212`	`212`	`transition: all 100ms $ease;`
`213`	`213`
`214`	`214`	`&:hover {`
`215`		`- color: $primary-color;`
	`215`	`+ color: var(--primary-color);`
`216`	`216`	`}`
`217`	`217`	`}`
`218`	`218`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`color: rgba(var(--front), 0.72);`
`15`	`15`
`16`	`16`	`&:hover {`
`17`		`- color: $primary-color;`
	`17`	`+ color: var(--primary-color);`
`18`	`18`	`text-decoration: none;`
`19`	`19`	`}`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -202,7 +202,7 @@`
`202`	`202`	`text-decoration: underline;`
`203`	`203`
`204`	`204`	`&:hover {`
`205`		`- color: $primary-color;`
	`205`	`+ color: var(--primary-color);`
`206`	`206`	`}`
`207`	`207`	`}`
`208`	`208`	`}`
`@@ -222,7 +222,7 @@`
`222`	`222`	`text-decoration: underline;`
`223`	`223`
`224`	`224`	`&:hover {`
`225`		`- color: $primary-color;`
	`225`	`+ color: var(--primary-color);`
`226`	`226`	`}`
`227`	`227`	`}`
`228`	`228`
Original file line number	Diff line number	Diff line change
`@@ -45,16 +45,16 @@`
`45`	`45`
`46`	`46`	`&.-active {`
`47`	`47`	`font-weight: 500;`
`48`		`- color: $primary-color;`
	`48`	`+ color: var(--primary-color);`
`49`	`49`	`text-decoration: none;`
`50`	`50`
`51`	`51`	`&:visited {`
`52`		`- color: $primary-color;`
	`52`	`+ color: var(--primary-color);`
`53`	`53`	`}`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`&:hover {`
`57`		`- color: $primary-color;`
	`57`	`+ color: var(--primary-color);`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`&:hover,`
`@@ -77,21 +77,21 @@`
`77`	`77`	`svg {`
`78`	`78`	`width: 15px;`
`79`	`79`	`height: 15px;`
`80`		`- color: $link-base-color;`
	`80`	`+ color: var(--link-base-color);`
`81`	`81`	`transition: all 150ms $ease;`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`&:active,`
`85`	`85`	`&:focus {`
`86`	`86`	`border-width: 0;`
`87`		`- background-color: rgba($primary-color, 0.1);`
	`87`	`+ background-color: rgba(var(--primary-color-rgb), 0.1);`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`&:hover {`
`91`		`- background-color: rgba($primary-color, 0.1);`
	`91`	`+ background-color: rgba(var(--primary-color-rgb), 0.1);`
`92`	`92`
`93`	`93`	`svg {`
`94`		`- color: $primary-color;`
	`94`	`+ color: var(--primary-color);`
`95`	`95`	`}`
`96`	`96`	`}`
`97`	`97`	`}`
`@@ -113,25 +113,25 @@`
`113`	`113`	`color: #474747;`
`114`	`114`
`115`	`115`	`&:hover {`
`116`		`- color: $primary-color;`
	`116`	`+ color: var(--primary-color);`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`	`}`
`120`	`120`	`}`
`121`	`121`
`122`	`122`	`&.-active {`
`123`	`123`	`> a.nav-list-link {`
`124`		`- color: $primary-color;`
	`124`	`+ color: var(--primary-color);`
`125`	`125`
`126`	`126`	`&:visited {`
`127`		`- color: $primary-color;`
	`127`	`+ color: var(--primary-color);`
`128`	`128`	`}`
`129`	`129`	`}`
`130`	`130`
`131`	`131`	`> .nav-list-expander {`
`132`	`132`	`svg {`
`133`	`133`	`transform: rotate(90deg);`
`134`		`- color: $primary-color;`
	`134`	`+ color: var(--primary-color);`
`135`	`135`	`}`
`136`	`136`	`}`
`137`	`137`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`transition: all 150ms $ease;`
`22`	`22`
`23`	`23`	`&:hover {`
`24`		`- color: $primary-color;`
	`24`	`+ color: var(--primary-color);`
`25`	`25`	`text-decoration: underline;`
`26`	`26`	`}`
`27`	`27`	`}`
`@@ -67,11 +67,11 @@`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`&:hover {`
`70`		`- color: $primary-color;`
	`70`	`+ color: var(--primary-color);`
`71`	`71`	`text-decoration: none;`
`72`	`72`
`73`	`73`	`svg {`
`74`		`- fill: $primary-color !important;`
	`74`	`+ fill: var(--primary-color) !important;`
`75`	`75`	`}`
`76`	`76`	`}`
`77`	`77`
`@@ -119,8 +119,8 @@`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`&:hover {`
`122`		`- color: $primary-color;`
`123`		`- border-color: $primary-color;`
	`122`	`+ color: var(--primary-color);`
	`123`	`+ border-color: var(--primary-color);`
`124`	`124`	`}`
`125`	`125`	`}`
`126`	`126`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`
`25`	`25`	`&:active,`
`26`	`26`	`&:focus {`
`27`		`- border-color: $primary-color;`
	`27`	`+ border-color: var(--primary-color);`
`28`	`28`	`outline: none;`
`29`	`29`	`}`
`30`	`30`	`}`
`@@ -60,10 +60,10 @@`
`60`	`60`
`61`	`61`	`&:hover {`
`62`	`62`	`text-decoration: none;`
`63`		`- background-color: rgba($primary-color, 0.05);`
	`63`	`+ background-color: rgba(var(--primary-color-rgb), 0.05);`
`64`	`64`
`65`	`65`	`h3 {`
`66`		`- color: $primary-color;`
	`66`	`+ color: var(--primary-color);`
`67`	`67`	`}`
`68`	`68`	`}`
`69`	`69`	`}`
`@@ -77,4 +77,4 @@`
`77`	`77`	`}`
`78`	`78`	`}`
`79`	`79`	`}`
`80`		`-}`
	`80`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`
`32`	`32`	`&:hover {`
`33`	`33`	`svg {`
`34`		`- color: $primary-color;`
	`34`	`+ color: var(--primary-color);`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`	`}`
`@@ -51,7 +51,7 @@`
`51`	`51`	`font-size: 16px;`
`52`	`52`
`53`	`53`	`&:hover {`
`54`		`- color: $primary-color;`
	`54`	`+ color: var(--primary-color);`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`	`}`
`@@ -74,7 +74,7 @@`
`74`	`74`
`75`	`75`	`&:hover {`
`76`	`76`	`svg {`
`77`		`- fill: $primary-color !important;`
	`77`	`+ fill: var(--primary-color) !important;`
`78`	`78`	`}`
`79`	`79`	`}`
`80`	`80`
`@@ -101,7 +101,7 @@`
`101`	`101`	`font-size: 16px;`
`102`	`102`
`103`	`103`	`&:hover {`
`104`		`- color: $primary-color;`
	`104`	`+ color: var(--primary-color);`
`105`	`105`	`}`
`106`	`106`	`}`
`107`	`107`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@`
`32`	`32`	`white-space: nowrap;`
`33`	`33`
`34`	`34`	`&:focus {`
`35`		`- outline: 2px solid $primary-color;`
	`35`	`+ outline: 2px solid var(--primary-color);`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`svg {`
`@@ -51,15 +51,15 @@`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`&:focus {`
`54`		`- background-color: rgba($primary-color, 0.05);`
	`54`	`+ background-color: rgba(var(--primary-color), 0.05);`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`&:hover {`
`58`		`- color: $primary-color;`
	`58`	`+ color: var(--primary-color);`
`59`	`59`	`text-decoration: none;`
`60`	`60`
`61`	`61`	`svg {`
`62`		`- color: $primary-color;`
	`62`	`+ color: var(--primary-color);`
`63`	`63`	`}`
`64`	`64`	`}`
`65`	`65`	`}`
`@@ -75,16 +75,16 @@`
`75`	`75`	`font-weight: 500;`
`76`	`76`
`77`	`77`	`&:hover {`
`78`		`- color: $primary-color;`
	`78`	`+ color: var(--primary-color);`
`79`	`79`	`text-decoration: none;`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`&:focus {`
`83`		`- background-color: rgba($primary-color, 0.1);`
	`83`	`+ background-color: rgba(var(--primary-color), 0.1);`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`&.active {`
`87`		`- color: $primary-color;`
	`87`	`+ color: var(--primary-color);`
`88`	`88`	`}`
`89`	`89`	`}`
`90`	`90`
`@@ -110,18 +110,18 @@`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`&:focus {`
`113`		`- background-color: rgba($primary-color, 0.05);`
	`113`	`+ background-color: rgba(var(--primary-color), 0.05);`
`114`	`114`	`}`
`115`	`115`
`116`	`116`	`&:hover {`
`117`	`117`	`svg {`
`118`		`- color: $primary-color;`
	`118`	`+ color: var(--primary-color);`
`119`	`119`	`}`
`120`	`120`	`}`
`121`	`121`
`122`	`122`	`&.-active {`
`123`	`123`	`svg {`
`124`		`- color: $primary-color;`
	`124`	`+ color: var(--primary-color);`
`125`	`125`	`}`
`126`	`126`	`}`
`127`	`127`	`}`
`@@ -205,10 +205,10 @@`
`205`	`205`
`206`	`206`	`&:hover {`
`207`	`207`	`text-decoration: none;`
`208`		`- background-color: rgba($primary-color, 0.05);`
	`208`	`+ background-color: rgba(var(--primary-color), 0.05);`
`209`	`209`
`210`	`210`	`h3 {`
`211`		`- color: $primary-color;`
	`211`	`+ color: var(--primary-color);`
`212`	`212`	`}`
`213`	`213`	`}`
`214`	`214`	`}`
`@@ -255,11 +255,11 @@`
`255`	`255`	`}`
`256`	`256`
`257`	`257`	`&:focus {`
`258`		`- background-color: rgba($primary-color, 0.05);`
	`258`	`+ background-color: rgba(var(--primary-color), 0.05);`
`259`	`259`	`}`
`260`	`260`
`261`	`261`	`&:hover {`
`262`		`- color: $primary-color;`
	`262`	`+ color: var(--primary-color);`
`263`	`263`	`}`
`264`	`264`	`}`
`265`	`265`
`@@ -341,7 +341,7 @@`
`341`	`341`
`342`	`342`	`.nav-trigger {`
`343`	`343`	`svg {`
`344`		`- fill: $primary-color;`
	`344`	`+ fill: var(--primary-color);`
`345`	`345`	`}`
`346`	`346`	`}`
`347`	`347`	`}`
`@@ -376,7 +376,7 @@`
`376`	`376`	`bottom: -1px;`
`377`	`377`	`height: 1px;`
`378`	`378`	`opacity: 0;`
`379`		`- background-color: $primary-color;`
	`379`	`+ background-color: var(--primary-color);`
`380`	`380`	`}`
`381`	`381`
`382`	`382`	`&.active {`