@scality/core-ui 0.201.0 → 0.203.0

package/dist/components/editor/Editor.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/editor/Editor.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/C,wBAAgB,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAIvD;AAED,wBAAgB,8BAA8B,IAAI,SAAS,CA4E1D;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,GAAI,yDAOpB,WAAW,4CAiDb,CAAC"}
+{"version":3,"file":"Editor.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/editor/Editor.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/C,wBAAgB,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAIvD;AAED,wBAAgB,8BAA8B,IAAI,SAAS,CA4E1D;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,GAAI,yDAOpB,WAAW,4CAkDb,CAAC"}

package/dist/components/editor/Editor.component.js

@@ -111,6 +111,7 @@ export const Editor = ({ value, onChange, readOnly = false, language = 'json', h
             autocompletion: true,
             highlightActiveLine: true,
             highlightActiveLineGutter: true,
+            highlightSelectionMatches: false,
             indentOnInput: true,
             bracketMatching: true,
             closeBrackets: true,

package/dist/components/editor/editorTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../../src/lib/components/editor/editorTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAM5D;AAyBD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,CAsF/D"}
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../../../src/lib/components/editor/editorTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAM5D;AAyBD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,CAuF/D"}

package/dist/components/editor/editorTheme.js

@@ -40,11 +40,12 @@ export function createEditorTheme(theme) {
         '&': {
             backgroundColor: theme.backgroundLevel1,
             color: theme.textPrimary,
+            fontFamily: "'Courier New', monospace",
+            fontSize: '12px',
+            lineHeight: '1.6',
         },
         '.cm-content': {
             caretColor: theme.textPrimary,
-            fontFamily: "'Courier New', monospace",
-            fontSize: '12px',
         },
         '.cm-cursor, .cm-dropCursor': {
             borderLeftColor: theme.textPrimary,

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.201.0",
+  "version": "0.203.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

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

@@ -154,6 +154,7 @@ export const Editor = ({
         autocompletion: true,
         highlightActiveLine: true,
         highlightActiveLineGutter: true,
+        highlightSelectionMatches: false,
         indentOnInput: true,
         bracketMatching: true,
         closeBrackets: true,

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

@@ -46,11 +46,12 @@ export function createEditorTheme(theme: CoreUITheme): Extension {
       '&': {
         backgroundColor: theme.backgroundLevel1,
         color: theme.textPrimary,
+        fontFamily: "'Courier New', monospace",
+        fontSize: '12px',
+        lineHeight: '1.6',
       },
       '.cm-content': {
         caretColor: theme.textPrimary,
-        fontFamily: "'Courier New', monospace",
-        fontSize: '12px',
       },
       '.cm-cursor, .cm-dropCursor': {
         borderLeftColor: theme.textPrimary,

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;
   }