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"