46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
|
/**
|
||
|
|
* A function that parses the `tokens.css`-file from `@hashicorp/design-system-tokens`
|
||
|
|
* and creates a map out of it that can be used to build up a color configuration
|
||
|
|
* in `tailwind.config.js`.
|
||
|
|
*
|
||
|
|
* @param {string} tokensPath - The path to `tokens.css` from `@hashicorp/design-system-tokens`
|
||
|
|
* @returns { { [string]: string } } An object that contains color names as keys and color values as values.
|
||
|
|
*/
|
||
|
|
function colorMapFromTokens(tokensPath) {
|
||
|
|
const css = require('css');
|
||
|
|
const path = require('path');
|
||
|
|
const fs = require('fs');
|
||
|
|
|
||
|
|
const hdsTokensPath = path.join(__dirname, tokensPath);
|
||
|
|
|
||
|
|
const tokensFile = fs.readFileSync(hdsTokensPath, {
|
||
|
|
encoding: 'utf8',
|
||
|
|
flag: 'r',
|
||
|
|
});
|
||
|
|
|
||
|
|
const ast = css.parse(tokensFile);
|
||
|
|
const rootVars = ast.stylesheet.rules.filter((r) => r.type !== 'comment')[0];
|
||
|
|
|
||
|
|
// filter out all colors and then create a map out of them
|
||
|
|
const vars = rootVars.declarations.filter((d) => d.type !== 'comment');
|
||
|
|
const colorPropertyNameCleanupRegex = /^--token-color-(palette-)?/;
|
||
|
|
const colors = vars.filter((d) => d.property.match(/^--token-color-/));
|
||
|
|
|
||
|
|
return colors.reduce((acc, d) => {
|
||
|
|
acc[d.property.replace(colorPropertyNameCleanupRegex, 'hds-')] = d.value;
|
||
|
|
return acc;
|
||
|
|
}, {});
|
||
|
|
}
|
||
|
|
|
||
|
|
/** @type {import('tailwindcss').Config} */
|
||
|
|
module.exports = {
|
||
|
|
content: ['./app/**/*.{html,js,hbs,mdx}', './docs/**/*.{html,js,hbs,mdx}'],
|
||
|
|
theme: {
|
||
|
|
colors: colorMapFromTokens(
|
||
|
|
'../../node_modules/@hashicorp/design-system-tokens/dist/products/css/tokens.css'
|
||
|
|
),
|
||
|
|
extend: {},
|
||
|
|
},
|
||
|
|
plugins: [],
|
||
|
|
};
|