kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
52 wiersze
1.8 KiB
JavaScript
52 wiersze
1.8 KiB
JavaScript
import {
|
|
withOpacityValue,
|
|
parseColorMatrix,
|
|
} from '../colors.cjs';
|
|
|
|
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: .3 })).toEqual('rgb(var(--color-accent-300) / 0.3)');
|
|
});
|
|
|
|
it('parses single-tint values', () => {
|
|
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],
|
|
'gradient-start': true,
|
|
'gradient-end': true,
|
|
};
|
|
|
|
const result = parseColorMatrix(colorMatrix);
|
|
|
|
expect(result['gradient-start']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-start) / 0.7)');
|
|
});
|
|
});
|