diff --git a/ghost/admin/app/helpers/hex-adjust.js b/ghost/admin/app/helpers/hex-adjust.js index c4ccb8e857..08e2e2d928 100644 --- a/ghost/admin/app/helpers/hex-adjust.js +++ b/ghost/admin/app/helpers/hex-adjust.js @@ -1,4 +1,4 @@ -import Color from 'color'; +import {Color} from '@tryghost/color-utils'; import {helper} from '@ember/component/helper'; export default helper(function hexAdjuster([hex], {s: sDiff = 0, l: lDiff = 0} = {}) { diff --git a/ghost/admin/app/services/ui.js b/ghost/admin/app/services/ui.js index bf533fc9d5..56f734bd55 100644 --- a/ghost/admin/app/services/ui.js +++ b/ghost/admin/app/services/ui.js @@ -1,11 +1,11 @@ -import Color from 'color'; import Service, {inject as service} from '@ember/service'; -import {action} from '@ember/object'; import { + Color, darkenToContrastThreshold, lightenToContrastThreshold, textColorForBackgroundColor -} from 'ghost-admin/utils/color'; +} from '@tryghost/color-utils'; +import {action} from '@ember/object'; import {get} from '@ember/object'; import {isEmpty} from '@ember/utils'; import {tracked} from '@glimmer/tracking'; diff --git a/ghost/admin/app/utils/color.js b/ghost/admin/app/utils/color.js deleted file mode 100644 index bf85f9db7d..0000000000 --- a/ghost/admin/app/utils/color.js +++ /dev/null @@ -1,55 +0,0 @@ -import Color from 'color'; - -export function lightenToContrastThreshold(foreground, background, contrastThreshold) { - const foregroundColor = Color(foreground); - const backgroundColor = Color(background); - - const {h,s} = foregroundColor.hsl().object(); - - let newColor = foregroundColor; - - while (newColor.contrast(backgroundColor) < contrastThreshold) { - if (newColor.lightness() >= 100) { - break; - } - - newColor = Color({h, s, l: newColor.lightness() + 5}); - } - - return newColor; -} - -export function darkenToContrastThreshold(foreground, background, contrastThreshold) { - const foregroundColor = Color(foreground); - const backgroundColor = Color(background); - - const {h,s} = foregroundColor.hsl().object(); - - let newColor = foregroundColor; - - while (newColor.contrast(backgroundColor) < contrastThreshold) { - if (newColor.lightness() <= 0) { - break; - } - - newColor = Color({h, s, l: newColor.lightness() - 5}); - } - - return newColor; -} - -export function textColorForBackgroundColor(background) { - const backgroundColor = Color(background); - - const white = Color({r: 255, g: 255, b: 255}); - const black = Color({r: 0, g: 0, b: 0}); - - // shared with Portal https://github.com/TryGhost/Portal/blob/317876f20d22431df15e655ea6cc197fe636615e/src/utils/contrast-color.js#L26-L29 - const yiq = ( - backgroundColor.red() * 299 + - backgroundColor.green() * 587 + - backgroundColor.b() * 114 - ) / 1000; - - return (yiq >= 186) ? black : white; -} diff --git a/ghost/admin/package.json b/ghost/admin/package.json index 6c981622d0..9d9876db43 100644 --- a/ghost/admin/package.json +++ b/ghost/admin/package.json @@ -31,6 +31,7 @@ "@glimmer/component": "1.0.4", "@html-next/vertical-collection": "2.0.0", "@sentry/ember": "6.10.0", + "@tryghost/color-utils": "0.1.0", "@tryghost/helpers": "1.1.49", "@tryghost/kg-clean-basic-html": "2.0.0", "@tryghost/kg-parser-plugins": "2.0.0", @@ -50,7 +51,6 @@ "chai": "4.3.4", "chai-dom": "1.9.0", "codemirror": "5.48.2", - "color": "3.2.1", "csscomb": "4.3.0", "cssnano": "4.1.10", "element-resize-detector": "1.2.3", diff --git a/ghost/admin/yarn.lock b/ghost/admin/yarn.lock index 045640b659..d44a0090fa 100644 --- a/ghost/admin/yarn.lock +++ b/ghost/admin/yarn.lock @@ -1801,6 +1801,13 @@ resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw== +"@tryghost/color-utils@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@tryghost/color-utils/-/color-utils-0.1.0.tgz#8a1be31f197d5ad899961b24e3db440038eae876" + integrity sha512-FzBH6vazZYNo+FfyltXcRq4vTiBcz0o3Em7iFETQIaMPHVSIBsPjXy5Vvhm7LaT+tyyZInXCsogfKlXynPVOqQ== + dependencies: + color "^3.2.1" + "@tryghost/helpers@1.1.49": version "1.1.49" resolved "https://registry.yarnpkg.com/@tryghost/helpers/-/helpers-1.1.49.tgz#0bbbe60bde134a93fa0726fef1a58c5bc54c8267" @@ -4832,7 +4839,7 @@ color-string@^1.6.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@3.2.1, color@^3.0.0: +color@^3.0.0, color@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== @@ -6803,7 +6810,6 @@ ember-power-calendar@^0.16.3: ember-power-datepicker@cibernox/ember-power-datepicker: version "0.8.1" - uid da580474a2c449b715444934ddb626b7c07f46a7 resolved "https://codeload.github.com/cibernox/ember-power-datepicker/tar.gz/da580474a2c449b715444934ddb626b7c07f46a7" dependencies: ember-basic-dropdown "^3.0.11" @@ -8589,7 +8595,6 @@ gonzales-pe@4.2.4: "google-caja-bower@https://github.com/acburdine/google-caja-bower#ghost": version "6011.0.0" - uid "275cb75249f038492094a499756a73719ae071fd" resolved "https://github.com/acburdine/google-caja-bower#275cb75249f038492094a499756a73719ae071fd" got@^8.0.1: @@ -9925,7 +9930,6 @@ just-extend@^4.0.2: "keymaster@https://github.com/madrobby/keymaster.git": version "1.6.3" - uid f8f43ddafad663b505dc0908e72853bcf8daea49 resolved "https://github.com/madrobby/keymaster.git#f8f43ddafad663b505dc0908e72853bcf8daea49" keyv@3.0.0: @@ -13257,7 +13261,6 @@ simple-swizzle@^0.2.2: "simplemde@https://github.com/kevinansfield/simplemde-markdown-editor.git#ghost": version "1.11.2" - uid "4c39702de7d97f9b32d5c101f39237b6dab7c3ee" resolved "https://github.com/kevinansfield/simplemde-markdown-editor.git#4c39702de7d97f9b32d5c101f39237b6dab7c3ee" sinon@^9.0.0: