[system] Fix parsing of hsla colors in getLuminance (#34437)

mui · Sep 26, 2022 · 6eff00f · 6eff00f
1 parent 5578d1d
commit 6eff00f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/mui-system/src/colorManipulator.js b/packages/mui-system/src/colorManipulator.js
@@ -189,7 +189,10 @@ export function hslToRgb(color) {
 export function getLuminance(color) {
   color = decomposeColor(color);
 
-  let rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
+  let rgb =
+    color.type === 'hsl' || color.type === 'hsla'
+      ? decomposeColor(hslToRgb(color)).values
+      : color.values;
   rgb = rgb.map((val) => {
     if (color.type !== 'color') {
       val /= 255; // normalized

diff --git a/packages/mui-system/src/colorManipulator.test.js b/packages/mui-system/src/colorManipulator.test.js
@@ -199,6 +199,14 @@ describe('utils/colorManipulator', () => {
       expect(getLuminance('rgb(255, 255, 255)')).to.equal(1);
     });
 
+    it('returns a valid luminance for hsla black', () => {
+      expect(getLuminance('hsla(0, 100%, 0%, 1)')).to.equal(0);
+    });
+
+    it('returns a valid luminance for hsla white', () => {
+      expect(getLuminance('hsla(0, 100%, 100%, 1)')).to.equal(1);
+    });
+
     it('returns a valid luminance for rgb mid-grey', () => {
       expect(getLuminance('rgba(127, 127, 127)')).to.equal(0.212);
       expect(getLuminance('rgb(127, 127, 127)')).to.equal(0.212);
@@ -212,6 +220,10 @@ describe('utils/colorManipulator', () => {
       expect(getLuminance('hsl(100, 100%, 50%)')).to.equal(0.735);
     });
 
+    it('returns a valid luminance from an hsla color', () => {
+      expect(getLuminance('hsla(100, 100%, 50%, 1)')).to.equal(0.735);
+    });
+
     it('returns an equal luminance for the same color in different formats', () => {
       const hsl = 'hsl(100, 100%, 50%)';
       const rgb = 'rgb(85, 255, 0)';