Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Adjusted .btn-accent colors in emails for a white background

Browse source 
refs https://github.com/TryGhost/Team/issues/928

- applied same darkening of accent color in emails as we use in editor when there's insufficient contrast of accent color against a white background
This commit is contained in:
Kevin Ansfield 2021-07-29 15:39:04 +01:00
parent eb92610df2
commit 10b7b31e6b
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
core/server/services/mega/post-email-serializer.js
View file

@ -12,7 +12,7 @@ const {URL} = require('url');
const mobiledocLib = require('../../lib/mobiledoc');
const htmlToText = require('html-to-text');
const {isUnsplashImage, isLocalContentImage} = require('@tryghost/kg-default-cards/lib/utils');
const {textColorForBackgroundColor} = require('@tryghost/color-utils');
const {textColorForBackgroundColor, darkenToContrastThreshold} = require('@tryghost/color-utils');
const logging = require('@tryghost/logging');
const ALLOWED_REPLACEMENTS = ['first_name'];
@ -147,6 +147,10 @@ const parseReplacements = (email) => {
};
const getTemplateSettings = async () => {
const accentColor = settingsCache.get('accent_color');
const adjustedAccentColor = accentColor && darkenToContrastThreshold(accentColor, '#ffffff', 2).hex();
const adjustedAccentContrastColor = accentColor && textColorForBackgroundColor(adjustedAccentColor).hex();
const templateSettings = {
headerImage: settingsCache.get('newsletter_header_image'),
showHeaderIcon: settingsCache.get('newsletter_show_header_icon') && settingsCache.get('icon'),
@ -157,8 +161,9 @@ const getTemplateSettings = async () => {
bodyFontCategory: settingsCache.get('newsletter_body_font_category'),
showBadge: settingsCache.get('newsletter_show_badge'),
footerContent: settingsCache.get('newsletter_footer_content'),
accentColor: settingsCache.get('accent_color'),
accentContrastColor: textColorForBackgroundColor(settingsCache.get('accent_color')).hex()
accentColor,
adjustedAccentColor,
adjustedAccentContrastColor
};
if (templateSettings.headerImage) {

8
core/server/services/mega/template-labs.js
View file

@ -619,13 +619,13 @@ figure blockquote p {
}
.btn-accent table td {
background-color: ${templateSettings.accentColor || '#3498db'};
background-color: ${templateSettings.adjustedAccentColor || '#3498db'};
}
.btn-accent a {
background-color: ${templateSettings.accentColor || '#3498db'};
border-color: ${templateSettings.accentColor || '#3498db'};
color: ${templateSettings.accentContrastColor || '#ffffff'};
background-color: ${templateSettings.adjustedAccentColor || '#3498db'};
border-color: ${templateSettings.adjustedAccentColor || '#3498db'};
color: ${templateSettings.adjustedAccentContrastColor || '#ffffff'};
}
/* -------------------------------------