@scality/core-ui 0.199.0 → 0.201.0

package/src/lib/components/editor/Editor.test.tsx

@@ -0,0 +1,295 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { coreUIAvailableThemes } from '../../style/theme';
+import { createEditorTheme, isDarkBackground } from './editorTheme';
+import {
+  Editor,
+  isEditAttempt,
+  createReadOnlyTooltipExtension,
+} from './Editor.component';
+import React from "react";
+
+const mockJsonSchema = jest.fn(() => []);
+
+jest.mock('@uiw/react-codemirror', () => {
+  const MockCodeMirror = (props: {
+    value?: string;
+    readOnly?: boolean;
+    height?: string;
+    width?: string;
+    onChange?: (value: string) => void;
+  }) => (
+    <textarea
+      data-testid="codemirror-editor"
+      value={props.value}
+      readOnly={props.readOnly}
+      style={{ height: props.height, width: props.width }}
+      onChange={(e) => props.onChange?.(e.target.value)}
+    />
+  );
+  MockCodeMirror.displayName = 'MockCodeMirror';
+  return { __esModule: true, default: MockCodeMirror };
+});
+
+jest.mock('codemirror-json-schema', () => ({
+  jsonSchema: (...args: unknown[]) => (mockJsonSchema as (...a: unknown[]) => unknown).apply(null, args),
+}));
+
+const darkTheme = coreUIAvailableThemes.darkRebrand;
+const lightTheme = coreUIAvailableThemes.artescaLight;
+
+const renderWithTheme = (ui: React.ReactElement, theme = darkTheme) =>
+  render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
+
+beforeEach(() => {
+  mockJsonSchema.mockClear();
+});
+
+describe('isDarkBackground', () => {
+  it('returns true for dark themes', () => {
+    expect(isDarkBackground(darkTheme)).toBe(true);
+    expect(isDarkBackground(coreUIAvailableThemes.ring9dark)).toBe(true);
+    expect(isDarkBackground(coreUIAvailableThemes['G-Dark'])).toBe(true);
+  });
+
+  it('returns false for light themes', () => {
+    expect(isDarkBackground(lightTheme)).toBe(false);
+  });
+});
+
+describe('Editor', () => {
+  it('renders with dark theme', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' />, darkTheme);
+    expect(screen.getByTestId('codemirror-editor')).toBeInTheDocument();
+  });
+
+  it('renders with light theme', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' />, lightTheme);
+    expect(screen.getByTestId('codemirror-editor')).toBeInTheDocument();
+  });
+
+  it('renders in read-only mode', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' readOnly />);
+    expect(screen.getByTestId('codemirror-editor')).toHaveAttribute('readonly');
+  });
+
+  it('displays the provided value', () => {
+    const json = '{"hello": "world"}';
+    renderWithTheme(<Editor value={json} />);
+    expect(screen.getByTestId('codemirror-editor')).toHaveValue(json);
+  });
+
+  it('renders with custom dimensions', () => {
+    renderWithTheme(<Editor value="" height="200px" width="500px" />);
+    const editor = screen.getByTestId('codemirror-editor');
+    expect(editor).toHaveStyle({ height: '200px', width: '500px' });
+  });
+
+  it('accepts language string shorthand', () => {
+    renderWithTheme(<Editor value='{"key": "value"}' language="json" />);
+    expect(screen.getByTestId('codemirror-editor')).toBeInTheDocument();
+  });
+
+  it('calls jsonSchema extension when schema is provided', () => {
+    const schema = {
+      type: 'object' as const,
+      properties: { name: { type: 'string' as const } },
+    };
+    renderWithTheme(
+      <Editor value='{"name": "test"}' language={{ name: 'json', schema }} />,
+    );
+    expect(mockJsonSchema).toHaveBeenCalledWith(schema);
+  });
+
+  it('does not call jsonSchema extension without schema', () => {
+    renderWithTheme(<Editor value='{}' language="json" />);
+    expect(mockJsonSchema).not.toHaveBeenCalled();
+  });
+
+  it('triggers onChange callback', () => {
+    const handleChange = jest.fn();
+    renderWithTheme(<Editor value='{"a": 1}' onChange={handleChange} />);
+    fireEvent.change(screen.getByTestId('codemirror-editor'), {
+      target: { value: '{"a": 2}' },
+    });
+    expect(handleChange).toHaveBeenCalledWith('{"a": 2}');
+  });
+});
+
+describe('isEditAttempt', () => {
+  const makeEvent = (overrides: Partial<KeyboardEvent> = {}): KeyboardEvent =>
+    ({
+      ctrlKey: false,
+      metaKey: false,
+      altKey: false,
+      ...overrides,
+    }) as unknown as KeyboardEvent;
+
+  it('detects regular character typing', () => {
+    expect(isEditAttempt(makeEvent({ key: 'a' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: '1' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: ' ' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: '{' }))).toBe(true);
+  });
+
+  it('detects edit keys (Backspace, Delete, Enter, Tab)', () => {
+    expect(isEditAttempt(makeEvent({ key: 'Backspace' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'Delete' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'Enter' }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'Tab' }))).toBe(true);
+  });
+
+  it('detects cut and paste shortcuts', () => {
+    expect(isEditAttempt(makeEvent({ key: 'x', ctrlKey: true }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'v', ctrlKey: true }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'x', metaKey: true }))).toBe(true);
+    expect(isEditAttempt(makeEvent({ key: 'v', metaKey: true }))).toBe(true);
+  });
+
+  it('ignores copy, select-all, and undo shortcuts', () => {
+    expect(isEditAttempt(makeEvent({ key: 'c', ctrlKey: true }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'a', ctrlKey: true }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'z', ctrlKey: true }))).toBe(false);
+  });
+
+  it('ignores navigation and modifier keys', () => {
+    expect(isEditAttempt(makeEvent({ key: 'ArrowLeft' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'ArrowUp' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'Escape' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'Shift' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'Control' }))).toBe(false);
+    expect(isEditAttempt(makeEvent({ key: 'F1' }))).toBe(false);
+  });
+});
+
+describe('createEditorTheme', () => {
+  it('returns two extensions for dark theme', () => {
+    const result = createEditorTheme(darkTheme);
+    expect(Array.isArray(result)).toBe(true);
+    expect(result).toHaveLength(2);
+  });
+
+  it('returns two extensions for light theme', () => {
+    const result = createEditorTheme(lightTheme);
+    expect(Array.isArray(result)).toBe(true);
+    expect(result).toHaveLength(2);
+  });
+
+  it('handles all available themes without errors', () => {
+    Object.values(coreUIAvailableThemes).forEach((theme) => {
+      expect(() => createEditorTheme(theme)).not.toThrow();
+    });
+  });
+});
+
+describe('createReadOnlyTooltipExtension', () => {
+  let parent: HTMLDivElement;
+
+  beforeEach(() => {
+    parent = document.createElement('div');
+    document.body.appendChild(parent);
+  });
+
+  afterEach(() => {
+    parent.remove();
+  });
+
+  it('shows tooltip with ARIA attributes on edit attempt', () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'a', bubbles: true }),
+    );
+
+    const tooltip = parent.querySelector('.cm-readonly-tooltip');
+    expect(tooltip).not.toBeNull();
+    expect(tooltip?.getAttribute('role')).toBe('status');
+    expect(tooltip?.getAttribute('aria-live')).toBe('polite');
+    expect(tooltip?.textContent).toBe('Cannot edit in read-only editor');
+
+    view.destroy();
+  });
+
+  it('dismisses tooltip after 2 seconds', () => {
+    jest.useFakeTimers();
+
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'a', bubbles: true }),
+    );
+    expect(parent.querySelector('.cm-readonly-tooltip')).not.toBeNull();
+
+    jest.advanceTimersByTime(2000);
+    expect(parent.querySelector('.cm-readonly-tooltip')).toBeNull();
+
+    view.destroy();
+    jest.useRealTimers();
+  });
+
+  it('cleans up DOM elements on destroy', () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'a', bubbles: true }),
+    );
+    expect(parent.querySelector('.cm-readonly-tooltip')).not.toBeNull();
+
+    view.destroy();
+    expect(parent.querySelector('.cm-readonly-tooltip')).toBeNull();
+  });
+
+  it('does not show tooltip for navigation keys', () => {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello',
+        extensions: [createReadOnlyTooltipExtension()],
+      }),
+      parent,
+    });
+
+    jest
+      .spyOn(view, 'coordsAtPos')
+      .mockReturnValue({ top: 10, bottom: 20, left: 30, right: 40 });
+
+    view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }),
+    );
+
+    expect(parent.querySelector('.cm-readonly-tooltip')).toBeNull();
+
+    view.destroy();
+  });
+});

package/src/lib/components/editor/editorTheme.ts

@@ -0,0 +1,126 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { getLuminance } from 'polished';
+import type { Extension } from '@codemirror/state';
+import type { CoreUITheme } from '../../style/theme';
+import { lineColor5 } from '../../style/theme';
+
+export function isDarkBackground(theme: CoreUITheme): boolean {
+  try {
+    return getLuminance(theme.backgroundLevel1) < 0.5;
+  } catch {
+    return true;
+  }
+}
+
+function getSyntaxColors(theme: CoreUITheme, isDark: boolean) {
+  if (isDark) {
+    return {
+      property: theme.statusHealthy,
+      string: lineColor5,
+      number: lineColor5,
+      boolean: lineColor5,
+      null: theme.textSecondary,
+      bracket: theme.textPrimary,
+      punctuation: theme.textPrimary,
+    };
+  }
+  return {
+    property: '#4078F2',
+    string: '#50A14F',
+    number: '#986801',
+    boolean: '#0184BC',
+    null: '#0184BC',
+    bracket: '#383A42',
+    punctuation: '#383A42',
+  };
+}
+
+export function createEditorTheme(theme: CoreUITheme): Extension {
+  const isDark = isDarkBackground(theme);
+  const syntax = getSyntaxColors(theme, isDark);
+
+  const editorViewTheme = EditorView.theme(
+    {
+      '&': {
+        backgroundColor: theme.backgroundLevel1,
+        color: theme.textPrimary,
+      },
+      '.cm-content': {
+        caretColor: theme.textPrimary,
+        fontFamily: "'Courier New', monospace",
+        fontSize: '12px',
+      },
+      '.cm-cursor, .cm-dropCursor': {
+        borderLeftColor: theme.textPrimary,
+      },
+      '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+        {
+          backgroundColor: theme.highlight,
+        },
+      '.cm-gutters': {
+        backgroundColor: theme.backgroundLevel1,
+        color: theme.textSecondary,
+        border: 'none',
+        borderRight: `1px solid ${theme.border}`,
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: theme.backgroundLevel3,
+      },
+      '.cm-activeLine': {
+        backgroundColor: theme.backgroundLevel3,
+      },
+      '.cm-foldPlaceholder': {
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: theme.textSecondary,
+      },
+      '.cm-diagnostic-error': {
+        borderLeftColor: theme.statusCritical,
+      },
+      '.cm-diagnostic-warning': {
+        borderLeftColor: theme.statusWarning,
+      },
+      '.cm-lintRange-error': {
+        backgroundImage: 'none',
+        textDecoration: `underline wavy ${theme.statusCritical}`,
+      },
+      '.cm-lintRange-warning': {
+        backgroundImage: 'none',
+        textDecoration: `underline wavy ${theme.statusWarning}`,
+      },
+      '.cm-tooltip': {
+        backgroundColor: theme.backgroundLevel3,
+        color: theme.textPrimary,
+        border: `1px solid ${theme.border}`,
+      },
+      '.cm-tooltip-lint': {
+        backgroundColor: theme.backgroundLevel3,
+      },
+      '.cm-panels': {
+        backgroundColor: theme.backgroundLevel4,
+        color: theme.textPrimary,
+      },
+      '.cm-readonly-tooltip': {
+        backgroundColor: theme.backgroundLevel3,
+        color: theme.textPrimary,
+        border: `1px solid ${theme.border}`,
+      },
+    },
+    { dark: isDark },
+  );
+
+  const highlightStyle = HighlightStyle.define([
+    { tag: tags.propertyName, color: syntax.property },
+    { tag: tags.string, color: syntax.string },
+    { tag: tags.number, color: syntax.number },
+    { tag: tags.bool, color: syntax.boolean },
+    { tag: tags.null, color: syntax.null },
+    { tag: tags.punctuation, color: syntax.punctuation },
+    { tag: tags.brace, color: syntax.bracket },
+    { tag: tags.squareBracket, color: syntax.bracket },
+  ]);
+
+  return [editorViewTheme, syntaxHighlighting(highlightStyle)];
+}

package/src/lib/components/editor/index.ts

@@ -0,0 +1,2 @@
+export { Editor } from './Editor.component';
+export type { EditorProps } from './Editor.component';

package/src/lib/components/iconhelper/IconHelper.tsx

@@ -23,7 +23,6 @@ const HelpButton = styled.button`
   border: none;
   padding: 0;
   margin: 0;
-  cursor: pointer;
   color: inherit;
   font: inherit;              /* Inherit font sizing */
   vertical-align: text-bottom;     /* Align with text */

package/src/lib/components/navbar/Navbar.component.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { Logo } from '../../icons/branding';
 import { spacing } from '../../spacing';
 import { fontSize, navbarHeight, navbarItemWidth } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
+import { getContrastText, getThemePropSelector } from '../../utils';
 import { Dropdown, type Item } from '../dropdown/Dropdown.component';
 import { Icon } from '../icon/Icon.component';
 import { Button, FocusVisibleStyle, type Props as ButtonProps } from '../buttonv2/Buttonv2.component';
@@ -38,16 +38,19 @@ export type Props = {
   logo?: JSX.Element;
   tabs?: Array<Tab>;
 };
+const getNavbarTextColor = (props) =>
+  getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse) ?? props.theme.textPrimary;
+
 const NavbarContainer = styled.div`
   height: ${navbarHeight};
   display: flex;
   justify-content: space-between;
   ${css`
     background-color: ${getThemePropSelector('navbarBackground')};
-    color: ${getThemePropSelector('textPrimary')};
+    color: ${getNavbarTextColor};
     .fas,
     .sc-trigger-text {
-      color: ${getThemePropSelector('textPrimary')};
+      color: ${getNavbarTextColor};
     }
     box-sizing: border-box;
     border-bottom: 0.5px solid ${(props) => props.theme.backgroundLevel2};
@@ -76,20 +79,21 @@ const NavbarTabs = styled.div`
     border-top: ${spacing.r2} solid transparent;
     ${(props) => {
       const { selectedActive } = props.theme;
+      const navTextColor = getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse) ?? props.theme.textPrimary;
       return css`
-        color: ${getThemePropSelector('textPrimary')};
+        color: ${navTextColor};
         &:hover {
           background-color: ${getThemePropSelector('highlight')};
         }
         &.selected {
-          color: ${getThemePropSelector('textPrimary')};
+          color: ${navTextColor};
           font-weight: bold;
           border-bottom-color: ${selectedActive};
         }
         // :focus-visible is the keyboard-only version of :focus
         &:focus-visible {
           ${FocusVisibleStyle}
-          color: ${props.theme.textPrimary};
+          color: ${navTextColor};
         }
       `;
     }};
@@ -103,9 +107,9 @@ const TabItem = styled.div<{ selected: boolean }>`
   align-items: center;
   padding: 0 ${spacing.r16};
   ${(props) => {
-    const { textPrimary } = props.theme;
+    const navTextColor = getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse) ?? props.theme.textPrimary;
     return css`
-      color: ${textPrimary};
+      color: ${navTextColor};
       &:hover {
         border-bottom: ${spacing.r2} solid;
         border-top: ${spacing.r2} solid;
@@ -114,7 +118,7 @@ const TabItem = styled.div<{ selected: boolean }>`
       // :focus-visible is the keyboard-only version of :focus
       &:focus-visible {
         ${FocusVisibleStyle}
-        color: ${props.theme.textPrimary};
+        color: ${navTextColor};
       }
     `;
   }};
@@ -149,13 +153,14 @@ const NavbarMenuItem = styled.div`
     height: ${navbarHeight};
     font-size: ${fontSize.base};
     background-color: ${getThemePropSelector('navbarBackground')};
+    color: ${(props) => getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse) ?? props.theme.textPrimary};
     &:hover {
       background-color: ${getThemePropSelector('highlight')};
     }
     // :focus-visible is the keyboard-only version of :focus
     &:focus-visible {
       ${FocusVisibleStyle}
-      color: ${(props) => props.theme.textPrimary};
+      color: ${(props) => getContrastText(props.theme.navbarBackground, props.theme.textPrimary, props.theme.textReverse) ?? props.theme.textPrimary};
     }
     width: ${navbarItemWidth};
   }

package/src/lib/next.ts

@@ -17,6 +17,8 @@ export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThem
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+export { Editor } from './components/editor';
+export type { EditorProps } from './components/editor';
 
 // Export all chart components from the consolidated charts folder
 export {

package/src/lib/utils.test.ts

@@ -0,0 +1,48 @@
+import { getContrastText } from './utils';
+
+const LIGHT_TEXT = '#EAEAEA';
+const DARK_TEXT = '#000000';
+
+describe('getContrastText', () => {
+  it('returns textPrimary on dark backgrounds when textPrimary is light', () => {
+    expect(getContrastText('#000000', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#1A1A1A', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#121219', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#2F4185', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+  });
+
+  it('returns textReverse on light backgrounds when textPrimary is light', () => {
+    expect(getContrastText('#FFFFFF', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
+    expect(getContrastText('#F5F5F5', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
+    expect(getContrastText('#FCFCFC', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
+  });
+
+  it('picks the text color with better contrast against a vivid background', () => {
+    expect(getContrastText('#E9041E', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
+    expect(getContrastText('#E9041E', '#FFFFFF', '#000000')).toBe('#FFFFFF');
+  });
+
+  it('handles 3-character hex shorthand', () => {
+    expect(getContrastText('#FFF', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
+    expect(getContrastText('#000', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+  });
+
+  it('handles hex without # prefix', () => {
+    expect(getContrastText('000000', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('FFFFFF', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
+  });
+
+  it('returns null for non-hex values', () => {
+    expect(
+      getContrastText(
+        'linear-gradient(130deg, #9355E7 0%, #2E4AA3 60%)',
+        LIGHT_TEXT,
+        DARK_TEXT,
+      ),
+    ).toBeNull();
+    expect(getContrastText('not-a-color', LIGHT_TEXT, DARK_TEXT)).toBeNull();
+    expect(
+      getContrastText('rgb(255, 0, 0)', LIGHT_TEXT, DARK_TEXT),
+    ).toBeNull();
+  });
+});

package/src/lib/utils.ts

@@ -45,6 +45,38 @@ export const hex2RGB = (str: string): [number, number, number] => {
   throw new Error('Invalid hex string provided');
 };
 
+// WCAG 2.0 relative luminance
+const relativeLuminance = (r: number, g: number, b: number): number => {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+};
+
+const wcagContrastRatio = (l1: number, l2: number): number =>
+  (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+
+const luminanceOf = (hex: string): number => {
+  const [r, g, b] = hex2RGB(hex);
+  return relativeLuminance(r, g, b);
+};
+
+export const getContrastText = (
+  bgColor: string,
+  textPrimary: string,
+  textReverse: string,
+): string | null => {
+  try {
+    const bgLum = luminanceOf(bgColor);
+    const primaryContrast = wcagContrastRatio(luminanceOf(textPrimary), bgLum);
+    const reverseContrast = wcagContrastRatio(luminanceOf(textReverse), bgLum);
+    return reverseContrast > primaryContrast ? textReverse : textPrimary;
+  } catch {
+    return null;
+  }
+};
+
 export const convertRemToPixels = (rem: number): number => {
   if (
     document.documentElement &&