Skip to content

Commit

Permalink
fix: css output for hue-less colors in lch() and oklch()
Browse files Browse the repository at this point in the history
resolves #357
  • Loading branch information
gka committed Sep 8, 2024
1 parent 2a429f2 commit 999a2b2
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/io/css/lch2css.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const lch2css = (...args) => {
let mode = last(args) || 'lab';
lcha[0] = rnd2(lcha[0]) + '%';
lcha[1] = rnd2(lcha[1]);
lcha[2] = rnd2(lcha[2]) + 'deg'; // add deg unit to hue
lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
if (mode === 'lcha' || (lcha.length > 3 && lcha[3] < 1)) {
lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
} else {
Expand Down
20 changes: 10 additions & 10 deletions src/io/css/oklch2css.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { unpack, rnd2, rnd3 } from '../../utils/index.js';

const oklab2css = (...args) => {
const laba = unpack(args, 'lab');
laba[0] = rnd2(laba[0] * 100) + '%';
laba[1] = rnd3(laba[1]);
laba[2] = rnd2(laba[2]) + 'deg';
if (laba.length > 3 && laba[3] < 1) {
laba[3] = '/ ' + (laba.length > 3 ? laba[3] : 1);
const oklch2css = (...args) => {
const lcha = unpack(args, 'lch');
lcha[0] = rnd2(lcha[0] * 100) + '%';
lcha[1] = rnd3(lcha[1]);
lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
if (lcha.length > 3 && lcha[3] < 1) {
lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
} else {
laba.length = 3;
lcha.length = 3;
}
return `oklch(${laba.join(' ')})`;
return `oklch(${lcha.join(' ')})`;
};

export default oklab2css;
export default oklch2css;
23 changes: 22 additions & 1 deletion test/io/rgb2css.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,28 @@ const tests = {
rgb: [212, 248, 128, 0.6],
mode: 'oklch',
css: 'oklch(92.83% 0.15 123.12deg / 0.6)'
}
},
white_rgb: { rgb: [255, 255, 255], css: 'rgb(255 255 255)' },
white_lab: { rgb: [255, 255, 255], mode: 'lab', css: 'lab(100% 0 0)' },
white_lch: { rgb: [255, 255, 255], mode: 'lch', css: 'lch(100% 0 none)' },
gray_lch: { rgb: [120, 120, 120], mode: 'lch', css: 'lch(50.43% 0 none)' },
black_lch: { rgb: [0, 0, 0], mode: 'lch', css: 'lch(0% 0 none)' },
white_oklab: {
rgb: [255, 255, 255],
mode: 'oklab',
css: 'oklab(100% 0 0)'
},
white_oklch: {
rgb: [255, 255, 255],
mode: 'oklch',
css: 'oklch(100% 0 none)'
},
gray_oklch: {
rgb: [120, 120, 120],
mode: 'oklch',
css: 'oklch(57.27% 0 none)'
},
black_oklch: { rgb: [0, 0, 0], mode: 'oklch', css: 'oklch(0% 0 none)' }
};

describe('Testing rgb2css color conversions', () => {
Expand Down

0 comments on commit 999a2b2

Please sign in to comment.