@scality/core-ui 0.202.0 → 0.203.0

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAYA;mCACmC;AACnC,eAAO,MAAM,oBAAoB,GAAI,QAAG,MAAM,UAAK,QAGlD,CAAC;AAEF;mCACmC;AACnC,eAAO,MAAM,uBAAuB,SAAU,UAAK,QAIlD,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,GAAI,SAAS,MAAM,KAAG,MACjB,CAAC;AAErC,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAc5D,CAAC;AAmBF,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,EACf,aAAa,MAAM,EACnB,aAAa,MAAM,KAClB,MAAM,GAAG,IASX,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,KAAG,MAahD,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,EACb,UAAS,sBAA2B,KACnC,MAoBF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAcA;mCACmC;AACnC,eAAO,MAAM,oBAAoB,GAAI,QAAG,MAAM,UAAK,QAGlD,CAAC;AAEF;mCACmC;AACnC,eAAO,MAAM,uBAAuB,SAAU,UAAK,QAIlD,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,kBAAkB,GAAI,SAAS,MAAM,KAAG,MACjB,CAAC;AAErC,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAc5D,CAAC;AASF,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,EACf,aAAa,MAAM,EACnB,aAAa,MAAM,KAClB,MAAM,GAAG,IAeX,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,KAAG,MAahD,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,EACb,UAAS,sBAA2B,KACnC,MAoBF,CAAC"}

package/dist/utils.js

@@ -1,3 +1,4 @@
+import { getLuminance } from 'polished';
 const RGB_HEX = /^#?(?:([\da-f]{3})[\da-f]?|([\da-f]{6})(?:[\da-f]{2})?)$/i;
 /** Ensure the consistency of colors between old and new colors */
 const variantMapping = {
@@ -37,25 +38,19 @@ export const hex2RGB = (str) => {
     }
     throw new Error('Invalid hex string provided');
 };
-// WCAG 2.0 relative luminance
-const relativeLuminance = (r, g, b) => {
-    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, l2) => (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
-const luminanceOf = (hex) => {
-    const [r, g, b] = hex2RGB(hex);
-    return relativeLuminance(r, g, b);
-};
+// Minimum WCAG contrast ratio to consider a text color readable on a background.
+// 3.0 corresponds to WCAG AA for large text — same threshold used by MUI.
+const CONTRAST_THRESHOLD = 3;
 export const getContrastText = (bgColor, textPrimary, textReverse) => {
     try {
-        const bgLum = luminanceOf(bgColor);
-        const primaryContrast = wcagContrastRatio(luminanceOf(textPrimary), bgLum);
-        const reverseContrast = wcagContrastRatio(luminanceOf(textReverse), bgLum);
-        return reverseContrast > primaryContrast ? textReverse : textPrimary;
+        const bgLum = getLuminance(bgColor);
+        const primaryLum = getLuminance(textPrimary);
+        const reverseLum = getLuminance(textReverse);
+        const lighterText = primaryLum >= reverseLum ? textPrimary : textReverse;
+        const darkerText = primaryLum >= reverseLum ? textReverse : textPrimary;
+        const lighterContrast = wcagContrastRatio(primaryLum >= reverseLum ? primaryLum : reverseLum, bgLum);
+        return lighterContrast >= CONTRAST_THRESHOLD ? lighterText : darkerText;
     }
     catch {
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.202.0",
+  "version": "0.203.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/utils.test.ts

@@ -4,22 +4,28 @@ const LIGHT_TEXT = '#EAEAEA';
 const DARK_TEXT = '#000000';
 
 describe('getContrastText', () => {
-  it('returns textPrimary on dark backgrounds when textPrimary is light', () => {
+  it('returns light text on dark backgrounds', () => {
     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', () => {
+  it('returns dark text on light backgrounds', () => {
     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('returns light text on saturated colors where WCAG luminance is ambiguous', () => {
+    expect(getContrastText('#E60028', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#E9041E', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#E60028', '#0D0D0D', '#EAEAEA')).toBe('#EAEAEA');
+  });
+
+  it('works regardless of which token is lighter', () => {
+    expect(getContrastText('#000000', DARK_TEXT, LIGHT_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#FFFFFF', DARK_TEXT, LIGHT_TEXT)).toBe(DARK_TEXT);
   });
 
   it('handles 3-character hex shorthand', () => {
@@ -27,12 +33,12 @@ describe('getContrastText', () => {
     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('handles rgb color format', () => {
+    expect(getContrastText('rgb(0, 0, 0)', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('rgb(255, 255, 255)', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
   });
 
-  it('returns null for non-hex values', () => {
+  it('returns null for unparseable values', () => {
     expect(
       getContrastText(
         'linear-gradient(130deg, #9355E7 0%, #2E4AA3 60%)',
@@ -41,8 +47,5 @@ describe('getContrastText', () => {
       ),
     ).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

@@ -1,3 +1,5 @@
+import { getLuminance } from 'polished';
+
 const RGB_HEX = /^#?(?:([\da-f]{3})[\da-f]?|([\da-f]{6})(?:[\da-f]{2})?)$/i;
 
 /** Ensure the consistency of colors between old and new colors */
@@ -45,22 +47,12 @@ 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);
-};
+// Minimum WCAG contrast ratio to consider a text color readable on a background.
+// 3.0 corresponds to WCAG AA for large text — same threshold used by MUI.
+const CONTRAST_THRESHOLD = 3;
 
 export const getContrastText = (
   bgColor: string,
@@ -68,10 +60,16 @@ export const getContrastText = (
   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;
+    const bgLum = getLuminance(bgColor);
+    const primaryLum = getLuminance(textPrimary);
+    const reverseLum = getLuminance(textReverse);
+
+    const lighterText = primaryLum >= reverseLum ? textPrimary : textReverse;
+    const darkerText = primaryLum >= reverseLum ? textReverse : textPrimary;
+
+    const lighterContrast = wcagContrastRatio(primaryLum >= reverseLum ? primaryLum : reverseLum, bgLum);
+
+    return lighterContrast >= CONTRAST_THRESHOLD ? lighterText : darkerText;
   } catch {
     return null;
   }