diff --git a/src/utils/useTenantTheming.ts b/src/utils/useTenantTheming.ts index 28aa25a75..4917609c7 100644 --- a/src/utils/useTenantTheming.ts +++ b/src/utils/useTenantTheming.ts @@ -4,71 +4,70 @@ import { TenantContext, useLocaleData } from '../globalState'; import { TenantDataInterface } from '../globalState/interfaces'; import getLocationVariables from './getLocationVariables'; import decodeHTML from './decodeHTML'; -import contrast from 'get-contrast'; import { useAppConfig } from '../hooks/useAppConfig'; -const RGBToHSL = (r, g, b) => { - // Make r, g, and b fractions of 1 - r /= 255; - g /= 255; - b /= 255; - - // Find greatest and smallest channel values - const cmin = Math.min(r, g, b); - const cmax = Math.max(r, g, b); - const delta = cmax - cmin; - let h; - let s; - let l; - - // Calculate hue - // No difference - if (delta === 0) h = 0; - // Red is max - else if (cmax === r) h = ((g - b) / delta) % 6; - // Green is max - else if (cmax === g) h = (b - r) / delta + 2; - // Blue is max - else h = (r - g) / delta + 4; - - h = Math.round(h * 60); - - // Make negative hues positive behind 360° - if (h < 0) h += 360; - - // Calculate lightness - l = (cmax + cmin) / 2; - - // Calculate saturation - s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); - - // Multiply l and s by 100 - s = +(s * 100).toFixed(1); - l = +(l * 100).toFixed(1); - - return { h, s, l }; -}; - -const hexToRGB = (hex) => { - let r = '0'; - let g = '0'; - let b = '0'; - - // 3 digits - if (hex.length === 4) { - r = '0x' + hex[1] + hex[1]; - g = '0x' + hex[2] + hex[2]; - b = '0x' + hex[3] + hex[3]; - - // 6 digits - } else if (hex.length === 7) { - r = '0x' + hex[1] + hex[2]; - g = '0x' + hex[3] + hex[4]; - b = '0x' + hex[5] + hex[6]; - } - - return RGBToHSL(r, g, b); -}; +// const RGBToHSL = (r, g, b) => { +// // Make r, g, and b fractions of 1 +// r /= 255; +// g /= 255; +// b /= 255; + +// // Find greatest and smallest channel values +// const cmin = Math.min(r, g, b); +// const cmax = Math.max(r, g, b); +// const delta = cmax - cmin; +// let h; +// let s; +// let l; + +// // Calculate hue +// // No difference +// if (delta === 0) h = 0; +// // Red is max +// else if (cmax === r) h = ((g - b) / delta) % 6; +// // Green is max +// else if (cmax === g) h = (b - r) / delta + 2; +// // Blue is max +// else h = (r - g) / delta + 4; + +// h = Math.round(h * 60); + +// // Make negative hues positive behind 360° +// if (h < 0) h += 360; + +// // Calculate lightness +// l = (cmax + cmin) / 2; + +// // Calculate saturation +// s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); + +// // Multiply l and s by 100 +// s = +(s * 100).toFixed(1); +// l = +(l * 100).toFixed(1); + +// return { h, s, l }; +// }; + +// const hexToRGB = (hex) => { +// let r = '0'; +// let g = '0'; +// let b = '0'; + +// // 3 digits +// if (hex.length === 4) { +// r = '0x' + hex[1] + hex[1]; +// g = '0x' + hex[2] + hex[2]; +// b = '0x' + hex[3] + hex[3]; + +// // 6 digits +// } else if (hex.length === 7) { +// r = '0x' + hex[1] + hex[2]; +// g = '0x' + hex[3] + hex[4]; +// b = '0x' + hex[5] + hex[6]; +// } + +// return RGBToHSL(r, g, b); +// }; /** * adjusting colors via lightness, for hover effects, etc. @@ -76,83 +75,83 @@ const hexToRGB = (hex) => { * @param adjust {number} * @return {string} */ -const adjustHSLColor = ({ - color, - adjust -}: { - color: Record; - adjust: number; -}): string => { - return `hsl(${color.h}, ${color.s}%, ${adjust}%)`; -}; - -const injectCss = ({ primaryColor, secondaryColor }) => { - // make HSL colors over RGB from hex - const primaryHSL = hexToRGB(primaryColor); - const secondaryHSL = secondaryColor && hexToRGB(secondaryColor); - // The level AA WCAG scrore requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text. - const contrastThreshold = 4.5; - - // Intended to be used as the foreground color when text - // or icons are used on top of the primary color. - const textColorContrastSwitch = - primaryColor && contrast.ratio('#fff', primaryColor) > contrastThreshold - ? 'var(--skin-color-primary-foreground-light)' - : 'var(--skin-color-primary-foreground-dark)'; - - // Intended to be used as the foreground color when text - // or icons are used on top of the secondary color. - const textColorSecondaryContrastSwitch = - secondaryColor && - contrast.ratio('#fff', secondaryColor) > contrastThreshold - ? 'var(--skin-color-primary-foreground-light)' - : 'var(--skin-color-primary-foreground-dark)'; - - const secondaryColorContrastSafe = - secondaryColor && - contrast.ratio('#fff', secondaryColor) > contrastThreshold - ? secondaryColor - : 'var(--skin-color-default)'; - - const primaryColorContrastSafe = - primaryColor && contrast.ratio('#fff', primaryColor) < contrastThreshold - ? 'var(--skin-color-primary-foreground-dark)' - : primaryColor; - - document.head.insertAdjacentHTML( - 'beforeend', - `` - ); -}; +// const adjustHSLColor = ({ +// color, +// adjust +// }: { +// color: Record; +// adjust: number; +// }): string => { +// return `hsl(${color.h}, ${color.s}%, ${adjust}%)`; +// }; + +// const injectCss = ({ primaryColor, secondaryColor }) => { +// // make HSL colors over RGB from hex +// const primaryHSL = hexToRGB(primaryColor); +// const secondaryHSL = secondaryColor && hexToRGB(secondaryColor); +// // The level AA WCAG scrore requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text. +// const contrastThreshold = 4.5; + +// // Intended to be used as the foreground color when text +// // or icons are used on top of the primary color. +// const textColorContrastSwitch = +// primaryColor && contrast.ratio('#fff', primaryColor) > contrastThreshold +// ? 'var(--skin-color-primary-foreground-light)' +// : 'var(--skin-color-primary-foreground-dark)'; + +// // Intended to be used as the foreground color when text +// // or icons are used on top of the secondary color. +// const textColorSecondaryContrastSwitch = +// secondaryColor && +// contrast.ratio('#fff', secondaryColor) > contrastThreshold +// ? 'var(--skin-color-primary-foreground-light)' +// : 'var(--skin-color-primary-foreground-dark)'; + +// const secondaryColorContrastSafe = +// secondaryColor && +// contrast.ratio('#fff', secondaryColor) > contrastThreshold +// ? secondaryColor +// : 'var(--skin-color-default)'; + +// const primaryColorContrastSafe = +// primaryColor && contrast.ratio('#fff', primaryColor) < contrastThreshold +// ? 'var(--skin-color-primary-foreground-dark)' +// : primaryColor; + +// document.head.insertAdjacentHTML( +// 'beforeend', +// `` +// ); +// }; const getOrCreateHeadNode = ( tagName: string,