From d2acfdbc7fb20120301776990e3250cb5e4890c0 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 19 Jun 2021 09:20:01 -0700
Subject: [PATCH] improve contrast on generated color palettes
---
gatsby-node.js | 26 +++++++++++++++++++-------
package.json | 1 +
src/fragments.js | 36 ++++++------------------------------
src/utils.js | 12 ++++++------
tailwind.config.js | 12 ++++++------
yarn.lock | 14 ++++++++++++++
6 files changed, 52 insertions(+), 49 deletions(-)
diff --git a/gatsby-node.js b/gatsby-node.js
index 8222741..c213308 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,6 +5,7 @@ const { read } = require('fast-exif');
const iptc = require('node-iptc');
const Vibrant = require('node-vibrant');
const R = require('ramda');
+const chroma = require('chroma-js');
const readFile = util.promisify(fs.readFile);
@@ -38,19 +39,30 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData) {
}
}
- const vibrant = R.map((swatch) => ({
- rgb: swatch.getRgb(),
- titleTextColor: swatch.getTitleTextColor(),
- bodyTextColor: swatch.getBodyTextColor(),
- })
- , vibrantData);
+ const vbChroma = R.map((swatch) => (chroma(swatch.getRgb()))
+ , vibrantData);
+
+
+ if (chroma.contrast(vbChroma.DarkVibrant, vbChroma.Vibrant) < 4.5) {
+ // console.log('adjusting colors', chroma.contrast(vbChroma.DarkVibrant, vbChroma.Vibrant));
+ // console.log(vbChroma.DarkVibrant.hex());
+ // console.log(vbChroma.Vibrant.hex());
+ vbChroma.DarkVibrant = vbChroma.DarkVibrant.darken();
+ vbChroma.Vibrant = vbChroma.Vibrant.brighten();
+ // console.log('adjusted', chroma.contrast(vbChroma.DarkVibrant, vbChroma.Vibrant));
+ // console.log(vbChroma.DarkVibrant.hex());
+ // console.log(vbChroma.Vibrant.hex());
+ }
+
+ const vibrantRgb = R.map((color) => color.rgb(), vbChroma);
+
return {
exif: exifData?.exif,
gps,
dateTaken: exifData?.exif?.DateTimeOriginal,
iptc: iptcData || undefined,
- vibrant,
+ vibrant: vibrantRgb,
};
}
diff --git a/package.json b/package.json
index ba2a835..6a60f28 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"babel-eslint": "^10.1.0",
"babel-plugin-preval": "^5.0.0",
"babel-plugin-styled-components": "^1.12.0",
+ "chroma-js": "^2.1.2",
"classnames": "^2.3.1",
"eslint": "^7.28.0",
"eslint-config-react-app": "^6.0.0",
diff --git a/src/fragments.js b/src/fragments.js
index fc308eb..71843a9 100644
--- a/src/fragments.js
+++ b/src/fragments.js
@@ -2,35 +2,11 @@ import { graphql } from 'gatsby';
export const VibrantColorsFragment = graphql`
fragment VibrantColors on ImageSharpFieldsImageMetaVibrant {
- DarkMuted {
- titleTextColor
- bodyTextColor
- rgb
- }
- DarkVibrant {
- titleTextColor
- bodyTextColor
- rgb
- }
- LightMuted {
- titleTextColor
- bodyTextColor
- rgb
- }
- LightVibrant {
- titleTextColor
- bodyTextColor
- rgb
- }
- Vibrant {
- titleTextColor
- bodyTextColor
- rgb
- }
- Muted {
- titleTextColor
- bodyTextColor
- rgb
- }
+ DarkMuted
+ DarkVibrant
+ LightMuted
+ LightVibrant
+ Vibrant
+ Muted
}
`;
\ No newline at end of file
diff --git a/src/utils.js b/src/utils.js
index c4cafd5..e1dd719 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -16,12 +16,12 @@ export const getRgba = (palette, alpha) => `rgba(${palette[0]}, ${palette[1]}, $
// work around SSR bug in react-helmet
export const getVibrantToHelmetSafeBodyStyle = (vibrant) => {
const style = {
- '--muted': vibrant.Muted.rgb,
- '--dark-muted': vibrant.DarkMuted.rgb,
- '--light-muted': vibrant.LightMuted.rgb,
- '--vibrant': vibrant.Vibrant.rgb,
- '--dark-vibrant': vibrant.DarkVibrant.rgb,
- '--light-vibrant': vibrant.LightVibrant.rgb,
+ '--muted': vibrant.Muted,
+ '--dark-muted': vibrant.DarkMuted,
+ '--light-muted': vibrant.LightMuted,
+ '--vibrant': vibrant.Vibrant,
+ '--dark-vibrant': vibrant.DarkVibrant,
+ '--light-vibrant': vibrant.LightVibrant,
};
if (typeof window === 'undefined') {
return style;
diff --git a/tailwind.config.js b/tailwind.config.js
index 31daaaf..4e760f2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,17 +36,17 @@ module.exports = {
DEFAULT: 'rgb(var(--vibrant))',
light: 'rgb(var(--light-vibrant))',
dark: 'rgb(var(--dark-vibrant))',
- '75': 'rgba(var(--vibrant), .75)',
- 'light-75': 'rgba(var(--light-vibrant), .75)',
- 'dark-75': 'rgba(var(--dark-vibrant), .75)',
+ '75': 'rgba(var(--vibrant), .8)',
+ 'light-75': 'rgba(var(--light-vibrant), .8)',
+ 'dark-75': 'rgba(var(--dark-vibrant), .8)',
},
muted: {
DEFAULT: 'rgb(var(--muted))',
light: 'rgb(var(--light-muted))',
dark: 'rgb(var(--dark-muted))',
- '75': 'rgba(var(--muted), .75)',
- 'light-75': 'rgba(var(--light-muted), .75)',
- 'dark-75': 'rgba(var(--dark-muted), .75)',
+ '75': 'rgba(var(--muted), .8)',
+ 'light-75': 'rgba(var(--light-muted), .8)',
+ 'dark-75': 'rgba(var(--dark-muted), .8)',
},
},
},
diff --git a/yarn.lock b/yarn.lock
index be0ee3f..94a7b74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3699,6 +3699,13 @@ chownr@^1.1.1:
resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+chroma-js@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.2.tgz#1075cb9ae25bcb2017c109394168b5cf3aa500ec"
+ integrity sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==
+ dependencies:
+ cross-env "^6.0.3"
+
chrome-trace-event@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -4172,6 +4179,13 @@ create-require@^1.1.0:
resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
+cross-env@^6.0.3:
+ version "6.0.3"
+ resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
+ integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==
+ dependencies:
+ cross-spawn "^7.0.0"
+
cross-fetch@3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"