From b71bc23a1ca7b1d8ca2b75f35da6b9b376374fe8 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuckd@axosoft.com>
Date: Wed, 21 Jul 2021 09:19:55 -0700
Subject: [PATCH] Darken `muted` colors when necessary
---
gatsby-node.js | 5 +++++
src/pages/index.js | 7 ++++---
src/styles/global.css | 12 +++---------
3 files changed, 12 insertions(+), 12 deletions(-)
diff --git a/gatsby-node.js b/gatsby-node.js
index 1bb56a5..6aa34e1 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -56,6 +56,11 @@ function processColors(vibrantData, imagePath) {
}
}
+ // only used for hover styles, so we should give it a shot but it's not a huge deal if it's not very legible
+ if (badContrast(Muted, LightMuted)) {
+ Muted = Muted.darken();
+ }
+
if (badContrast(DarkVibrant, Vibrant)) {
console.warn("contrast still too low", imagePath);
logColorsWithContrast(Vibrant, DarkVibrant, "V-DV");
diff --git a/src/pages/index.js b/src/pages/index.js
index 4bee291..b502bd6 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -24,8 +24,9 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
};
const getButtonClasses = (isClient, colorMode = "vibrant") => {
- const textColor = colorMode === 'vibrant' ? 'text-vibrant-light' : 'text-muted-light'
- const bgColor = colorMode === 'vibrant' ? 'bg-vibrant-dark' : 'bg-muted-dark'
+ const textColor =
+ colorMode === "vibrant" ? "text-vibrant-light" : "text-muted-light";
+ const bgColor = colorMode === "vibrant" ? "bg-vibrant-dark" : "bg-muted-dark";
return classnames(
"z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md hover:underline",
isClient && `${textColor} ${bgColor} blurred-or-opaque-bg-2`,
@@ -143,7 +144,7 @@ const IndexPage = ({
props: { currentImage: currentImage?.base },
});
// eslint-disable-next-line
- _paq.push(['trackEvent', 'Index', 'Shuffle', currentImage?.base]);
+ _paq.push(["trackEvent", "Index", "Shuffle", currentImage?.base]);
} catch (e) {
/* do nothing */
}
diff --git a/src/styles/global.css b/src/styles/global.css
index 8b79002..5cfd22c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -32,26 +32,20 @@
.scroll-padding-6 {
scroll-padding: theme("spacing.6");
}
- .blurred-or-opaque-bg-1 {
- @apply bg-opacity-70;
- }
- .blurred-or-opaque-bg-2 {
- @apply bg-opacity-90;
- }
@supports (backdrop-filter: none) {
.blurred-or-opaque-bg-1 {
@apply bg-opacity-50 backdrop-filter backdrop-blur-lg;
}
.blurred-or-opaque-bg-2 {
- @apply bg-opacity-70 backdrop-filter backdrop-blur;
+ @apply bg-opacity-60 backdrop-filter backdrop-blur;
}
}
@supports not (backdrop-filter: none) {
.blurred-or-opaque-bg-1 {
- @apply bg-opacity-70;
+ @apply bg-opacity-60;
}
.blurred-or-opaque-bg-2 {
- @apply bg-opacity-90;
+ @apply bg-opacity-70;
}
}
@variants responsive {