kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
tailwind.config.js: parse single-tint values in the matrix
rodzic
d57051c41c
commit
e0e953647e
|
@ -1,4 +1,4 @@
|
|||
const { parseColorMatrix, withOpacityValue } = require('./tailwind/colors');
|
||||
const { parseColorMatrix } = require('./tailwind/colors');
|
||||
|
||||
module.exports = {
|
||||
content: ['./app/**/*.{html,js,ts,tsx}'],
|
||||
|
@ -33,7 +33,7 @@ module.exports = {
|
|||
'Noto Color Emoji',
|
||||
],
|
||||
},
|
||||
colors: Object.assign(parseColorMatrix({
|
||||
colors: parseColorMatrix({
|
||||
// Define color matrix (of available colors)
|
||||
// Colors are configured at runtime with CSS variables in soapbox.json
|
||||
gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
|
||||
|
@ -41,10 +41,9 @@ module.exports = {
|
|||
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-purple': withOpacityValue('--color-gradient-purple'),
|
||||
'gradient-blue': withOpacityValue('--color-gradient-blue'),
|
||||
'sea-blue': withOpacityValue('--color-sea-blue'),
|
||||
'gradient-purple': true,
|
||||
'gradient-blue': true,
|
||||
'sea-blue': true,
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
|
|
@ -30,6 +30,24 @@ describe('parseColorMatrix()', () => {
|
|||
|
||||
// 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)');
|
||||
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-purple': true,
|
||||
'gradient-blue': true,
|
||||
'sea-blue': true,
|
||||
};
|
||||
|
||||
const result = parseColorMatrix(colorMatrix);
|
||||
|
||||
expect(result['sea-blue']({})).toEqual('rgb(var(--color-sea-blue))');
|
||||
expect(result['gradient-purple']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-purple) / 0.7)');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -8,19 +8,35 @@ function withOpacityValue(variable) {
|
|||
};
|
||||
}
|
||||
|
||||
// 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 a single color as a CSS variable
|
||||
const toColorVariable = (colorName, tint = null) => {
|
||||
const suffix = tint ? `-${tint}` : '';
|
||||
const variable = `--color-${colorName}${suffix}`;
|
||||
|
||||
return withOpacityValue(variable);
|
||||
};
|
||||
|
||||
// Parse list of tints into Tailwind function with CSS variables
|
||||
const parseTints = (colorName, tints) => {
|
||||
return tints.reduce((colorObj, tint) => {
|
||||
colorObj[tint] = toColorVariable(colorName, tint);
|
||||
return colorObj;
|
||||
}, {});
|
||||
};
|
||||
|
||||
// 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;
|
||||
// Parse color matrix into Tailwind color palette
|
||||
const parseColorMatrix = colorMatrix => {
|
||||
return Object.entries(colorMatrix).reduce((palette, colorData) => {
|
||||
const [colorName, tints] = colorData;
|
||||
|
||||
// Conditionally parse array or single-tint colors
|
||||
if (Array.isArray(tints)) {
|
||||
palette[colorName] = parseTints(colorName, tints);
|
||||
} else if (tints === true) {
|
||||
palette[colorName] = toColorVariable(colorName);
|
||||
}
|
||||
|
||||
return palette;
|
||||
}, {});
|
||||
};
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue