Ghost/ghost/admin/app/controllers/application.js
Kevin Ansfield 7286ae9fcf 🐛 Fixed link contrast in editor with very light/dark accent colors (#1870)
refs https://github.com/TryGhost/Team/issues/551
refs https://github.com/TryGhost/Ghost/issues/12767#issuecomment-800177254

- calculate contrast color of accent color against light/dark mode background color
- lighten (dark mode) or darken (light mode) the accent color used in the editor to ensure it has enough contrast to be legible
2021-03-18 16:46:38 +00:00

71 lines
2.4 KiB
JavaScript

/* eslint-disable ghost/ember/alias-model-in-controller */
import Controller from '@ember/controller';
import {computed} from '@ember/object';
import {
contrast,
darkenToContrastThreshold,
hexToRgb,
lightenToContrastThreshold,
rgbToHex
} from 'ghost-admin/utils/color';
import {inject as service} from '@ember/service';
export default Controller.extend({
billing: service(),
customViews: service(),
config: service(),
dropdown: service(),
feature: service(),
router: service(),
session: service(),
settings: service(),
ui: service(),
showBilling: computed.reads('config.hostSettings.billing.enabled'),
showNavMenu: computed('router.currentRouteName', 'session.{isAuthenticated,user.isFulfilled}', 'ui.isFullScreen', function () {
let {router, session, ui} = this;
// if we're in fullscreen mode don't show the nav menu
if (ui.isFullScreen) {
return false;
}
// we need to defer showing the navigation menu until the session.user
// promise has fulfilled so that gh-user-can-admin has the correct data
if (!session.isAuthenticated || !session.user.isFulfilled) {
return false;
}
return (router.currentRouteName !== 'error404' || session.isAuthenticated)
&& !router.currentRouteName.match(/(signin|signup|setup|reset)/);
}),
adjustedAccentColor: computed('settings.accentColor', 'feature.nightShift', function () {
const accentColor = this.settings.get('accentColor');
const nightShift = this.feature.get('nightShift');
// hardcoded background colors because
// grabbing color from .gh-main with getComputedStyle always returns #ffffff
const backgroundColor = nightShift ? '#151719' : '#ffffff';
const accentRgb = hexToRgb(accentColor);
const backgroundRgb = hexToRgb(backgroundColor);
// WCAG contrast. 1 = lowest contrast, 21 = highest contrast
const accentContrast = contrast(backgroundRgb, accentRgb);
if (accentContrast > 2) {
return accentColor;
}
let adjustedAccentRgb = accentRgb;
if (nightShift) {
adjustedAccentRgb = lightenToContrastThreshold(accentRgb, backgroundRgb, 2);
} else {
adjustedAccentRgb = darkenToContrastThreshold(accentRgb, backgroundRgb, 2);
}
return rgbToHex(adjustedAccentRgb);
})
});