parent
fff580f053
commit
d57051c41c
@ -0,0 +1,35 @@
|
||||
import {
|
||||
withOpacityValue,
|
||||
parseColorMatrix,
|
||||
} from '../colors';
|
||||
|
||||
describe('withOpacityValue()', () => {
|
||||
it('returns a Tailwind color function with alpha support', () => {
|
||||
const result = withOpacityValue('--color-primary-500');
|
||||
|
||||
// It returns a function
|
||||
expect(typeof result).toBe('function');
|
||||
|
||||
// Test calling the function
|
||||
expect(result({})).toBe('rgb(var(--color-primary-500))');
|
||||
expect(result({ opacityValue: .5 })).toBe('rgb(var(--color-primary-500) / 0.5)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('parseColorMatrix()', () => {
|
||||
it('returns a Tailwind color object', () => {
|
||||
const colorMatrix = {
|
||||
gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
|
||||
primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
|
||||
success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
|
||||
danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
|
||||
accent: [300, 500],
|
||||
};
|
||||
|
||||
const result = parseColorMatrix(colorMatrix);
|
||||
|
||||
// Colors are mapped to functions which return CSS values
|
||||
expect(result.primary[500]({})).toEqual('rgb(var(--color-primary-500))');
|
||||
expect(result.accent[300]({ opacityValue: .5 })).toEqual('rgb(var(--color-accent-300) / 0.5)');
|
||||
});
|
||||
});
|
@ -0,0 +1,30 @@
|
||||
// https://tailwindcss.com/docs/customizing-colors#using-css-variables
|
||||
function withOpacityValue(variable) {
|
||||
return ({ opacityValue }) => {
|
||||
if (opacityValue === undefined) {
|
||||
return `rgb(var(${variable}))`;
|
||||
}
|
||||
return `rgb(var(${variable}) / ${opacityValue})`;
|
||||
};
|
||||
}
|
||||
|
||||
// Parse list of shades into Tailwind function with CSS variables
|
||||
const parseShades = (color, shades) => {
|
||||
return shades.reduce((obj, shade) => {
|
||||
obj[shade] = withOpacityValue(`--color-${color}-${shade}`);
|
||||
return obj;
|
||||
}, {});
|
||||
};
|
||||
|
||||
// Parse color matrix into Tailwind colors object
|
||||
const parseColorMatrix = colors => {
|
||||
return Object.keys(colors).reduce((obj, color) => {
|
||||
obj[color] = parseShades(color, colors[color]);
|
||||
return obj;
|
||||
}, {});
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
withOpacityValue,
|
||||
parseColorMatrix,
|
||||
};
|
Loading…
Reference in new issue