feat: Update public portal colors with new design (#8230)

app/javascript/shared/helpers/colorHelper.js

@@ -1,3 +1,5 @@
+import { toHex, mix, getLuminance, getContrast } from 'color2k';
+
 export const isWidgetColorLighter = color => {
   const colorToCheck = color.replace('#', '');
   const c_r = parseInt(colorToCheck.substr(0, 2), 16);
@@ -6,3 +8,21 @@ export const isWidgetColorLighter = color => {
   const brightness = (c_r * 299 + c_g * 587 + c_b * 114) / 1000;
   return brightness > 225;
 };
+
+export const adjustColorForContrast = (color, backgroundColor) => {
+  const targetRatio = 3.1;
+  const MAX_ITERATIONS = 20;
+  let adjustedColor = color;
+
+  for (let iteration = 0; iteration < MAX_ITERATIONS; iteration += 1) {
+    const currentRatio = getContrast(adjustedColor, backgroundColor);
+    if (currentRatio >= targetRatio) {
+      break;
+    }
+    const adjustmentDirection =
+      getLuminance(adjustedColor) < 0.5 ? '#fff' : '#151718';
+    adjustedColor = mix(adjustedColor, adjustmentDirection, 0.05);
+  }
+
+  return toHex(adjustedColor);
+};

app/javascript/shared/helpers/specs/colorHelper.spec.js

@@ -1,4 +1,8 @@
-import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
+import { toHex, getContrast } from 'color2k';
+import {
+  isWidgetColorLighter,
+  adjustColorForContrast,
+} from 'shared/helpers/colorHelper';
 
 describe('#isWidgetColorLighter', () => {
   it('returns true if color is lighter', () => {
@@ -8,3 +12,56 @@ describe('#isWidgetColorLighter', () => {
     expect(isWidgetColorLighter('#000000')).toEqual(false);
   });
 });
+
+describe('#adjustColorForContrast', () => {
+  const targetRatio = 3.1;
+
+  const getContrastRatio = (color1, color2) => {
+    // getContrast from 'color2k'
+    return getContrast(color1, color2);
+  };
+
+  it('adjusts a color to meet the contrast ratio against a light background', () => {
+    const color = '#ff0000';
+    const backgroundColor = '#ffffff';
+    const adjustedColor = adjustColorForContrast(color, backgroundColor);
+    const ratio = getContrastRatio(adjustedColor, backgroundColor);
+
+    expect(ratio).toBeGreaterThanOrEqual(targetRatio);
+  });
+
+  it('adjusts a color to meet the contrast ratio against a dark background', () => {
+    const color = '#00ff00';
+    const backgroundColor = '#000000';
+    const adjustedColor = adjustColorForContrast(color, backgroundColor);
+    const ratio = getContrastRatio(adjustedColor, backgroundColor);
+
+    expect(ratio).toBeGreaterThanOrEqual(targetRatio);
+  });
+
+  it('returns a string representation of the color', () => {
+    const color = '#00ff00';
+    const backgroundColor = '#000000';
+    const adjustedColor = adjustColorForContrast(color, backgroundColor);
+
+    expect(typeof adjustedColor).toEqual('string');
+  });
+
+  it('handles cases where the color already meets the contrast ratio', () => {
+    const color = '#000000';
+    const backgroundColor = '#ffffff';
+    const adjustedColor = adjustColorForContrast(color, backgroundColor);
+    const ratio = getContrastRatio(adjustedColor, backgroundColor);
+
+    expect(ratio).toBeGreaterThanOrEqual(targetRatio);
+    expect(adjustedColor).toEqual(toHex(color));
+  });
+
+  it('does not modify a color that already exceeds the contrast ratio', () => {
+    const color = '#000000';
+    const backgroundColor = '#ffffff';
+    const adjustedColor = adjustColorForContrast(color, backgroundColor);
+
+    expect(adjustedColor).toEqual(toHex(color));
+  });
+});