UNPKG

@shopgate/engage

Version:

Shopgate's ENGAGE library.

github.com/shopgate/pwa/tree/master/libraries/engage

shopgate/pwa

10 lines • 3.18 kB
1
2
3
4
5
6
7
8
9
10
import Color from'color';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{hasWebBridge,hasNewServices}from'@shopgate/engage/core/helpers';import{getCSSCustomProp,setCSSCustomProp}from"./cssCustomProperties";var colors=themeConfig.colors;/** * Calculates a contrast color for a color * @param {string} color A color * @returns {string} */var getContrastColor=function getContrastColor(color){var perceivedLuminosity=Color(color).luminosity();return perceivedLuminosity>=0.74?colors.dark:colors.light;};/** * Initializes the CSS custom properties after they where loaded from a CSS file. * When the CSS file doesn't contain contrast colors, they will be calculated automatically. */export var initCSSCustomProps=function initCSSCustomProps(){var primary=getCSSCustomProp('--color-primary');var primaryContrast=getCSSCustomProp('--color-primary-contrast');var secondary=getCSSCustomProp('--color-secondary');var secondaryContrast=getCSSCustomProp('--color-secondary-contrast');if(primary&&!primaryContrast){setCSSCustomProp('--color-primary-contrast',getContrastColor(primary));}if(secondary&&!secondaryContrast){setCSSCustomProp('--color-secondary-contrast',getContrastColor(secondary));}if(hasWebBridge()){setCSSCustomProp('--page-background-color','#fff');}var sideNavigationBackground=Color(getCSSCustomProp('--color-primary')||colors.primary).alpha(0.08);setCSSCustomProp('--color-side-navigation-active-background',sideNavigationBackground);setCSSCustomProp('--color-button-cta','var(--color-primary)');setCSSCustomProp('--color-button-cta-contrast','var(--color-primary-contrast)');if(!getCSSCustomProp('--color-button-dialog-ios')){setCSSCustomProp('--color-button-dialog-ios','#1a73e8');}};/** * Initializes fallback CSS custom properties from the theme colors. */export var initCSSCustomPropsFallback=function initCSSCustomPropsFallback(){setCSSCustomProp('--color-primary',colors.primary);setCSSCustomProp('--color-primary-contrast',getContrastColor(colors.primary));setCSSCustomProp('--color-secondary',colors.accent);setCSSCustomProp('--color-secondary-contrast',getContrastColor(colors.accent));if(!hasNewServices()){setCSSCustomProp('--color-button-cta',colors.cta);setCSSCustomProp('--color-button-cta-contrast',colors.ctaContrast);}else{setCSSCustomProp('--color-button-cta','var(--color-primary)');setCSSCustomProp('--color-button-cta-contrast','var(--color-primary-contrast)');}if(!getCSSCustomProp('--color-button-dialog-ios')){setCSSCustomProp('--color-button-dialog-ios','#1a73e8');}setCSSCustomProp('--color-text-high-emphasis','#212121');setCSSCustomProp('--color-text-medium-emphasis','#666666');setCSSCustomProp('--color-text-low-emphasis','#9e9e9e');setCSSCustomProp('--color-background-accent','#f7f7f7');setCSSCustomProp('--color-state-alert',colors.error);setCSSCustomProp('--color-state-warning',colors.warning);setCSSCustomProp('--color-state-ok',colors.success);var sideNavigationBackground=Color(getCSSCustomProp('--color-primary')||colors.primary).fade(0.9);setCSSCustomProp('--color-side-navigation-active-background',sideNavigationBackground);if(hasWebBridge()){setCSSCustomProp('--page-background-color','#fff');}};